• Home

Items filtered by date: Monday, 07 December 2015

Sunday, 03 November 2024 15:26

My Visual Studio Code Notes

These are my notes on setting up VSCode for my programming platform for now and the future. This software is always being improved and is used by so many developers and with a vast array of extensions I cannot see this changing any time soon.

  • Visual Studio Code is not just a text editor any more, it is now an IDE because of it's extensive extension ecosystem.
  • The terms Folder, Root Folder, Project Folder and Workspace are all interchangeable and just mean the root folder of your project. It does not mean you can only have one folder with only files in it.
  • Use the term Workspace when referring to folder your project is in, most people will understand what you mean.
  • Visual Studio Code is also known as:
    • VSCode
    • VS Code

Websites

General

  • Overview
    • Visual Studio Code is a code editor redefined and optimised for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favourite platform - Linux, macOS, and Windows.
    • A standalone source code editor that runs on Windows, macOS, and Linux. The top pick for JavaScript and web developers, with extensions to support just about any programming language.
    • Microsoft Visual Studio Code is a free, powerful, lightweight code editor for Windows, macOS and Linux. Based on open source, it is highly customisable with over 25,000 extensions, for every developer and every programming language.
    • Although VSCode is classed as a text editor, it is now more like an IDE but requires you to install extension for functionality you need.
  • All the names for Visual Studio Code
    • Visual Studio Code
    • VSCode
    • VS Code
    • vscode
  • Features of note
    • Integrates with Docker Desktop
    • Copilot built in
    • 25,000+ extensions
    • VSCode can be run in the cloud
  • Visual Studio vs Visual Studio Code
    • Visual Studio 2022 Community Edition – Download Latest Free Version
      • Try our free, fully-featured, and extensible IDE for creating modern developer apps for Windows, Android, & iOS. Download Community for free today!
      • The download is a Stub-Installer, not a full offline package.
    • Visual Studio Code vs Visual Studio - YouTube
      • Deciding on Visual Studio or Visual Studio Code is not just a personal decision but based on the best option for the operating system and application type you are building.
      • There is a community editions or Visual Studio.
      • VSCode is a text editor which can be extended by plugins.
    • Visual Studio Ide vs Code: What's the difference between visual studio and vs code? - DEV Community
      • Visual Studio is a full IDE (integrated development environment) primarily used for .NET development. Debugger, refactor-er, compile, create packages, and more. The full version that supports .NET and .NET Core is not cross-platform. It is only on Windows. It also is used for other languages, but primarily for .NET C#/F#/etc development for and on Windows machines/servers. Working with .NET 4.x, WCF, WebAPI, building DLLs? Use Visual Studio probably. I do not use Visual Studio, but I am not a Windows/.NET dev.
      • Visual Studio Code is a text editor with lots of optional plugins -- it is more akin to Atom, SublimeText, and BBEdit. It has some features of Visual Studio, like syntax highlighting, some code sense, and other neat features. It is cross-platform and can be used for writing pretty any language. I use it on Mac and Linux for PHP, Python, HTML5, JavaScript, NodeJS, and more.
  • IntelliSense
  • Linting
    • Tells you of bugs or errors while you type your code
    • These errors can be highlighted by using a squiggly line under the faulty code.
  • Snippets
    • Visual Studio Code Snippets – the Definitive VS Code Snippet Guide for Beginners | freeCodeCamp.org - By Rob O'Leary Snippets can add a touch of magic to your editor. It's like an incantation. Utter a short phrase (type a prefix), wave your wand (press Enter or Tab), and presto! A wonderful event unfolds in front of you. Most code editors support snippets out of the box. The code editor I will use to showcase snippets is Visual Studio Code (VS Code), the most popular editor of the day.
    • Make your own Code Snippets in VS Code | Maurice Brg - I’ve been writing a lot in VS Code over the last weeks to prepare a Python course for work.After the 1000th time creating a Python code block in Markdown, I thought: There must be an easier way to do this - and there is: VS Code Snippets.In this article I teach you how to configure your own.
  • Command Palette
    • Search content, issue commands and do other things.
    • Very powerful
  • Language Server Protocol (LSP)
    • VSCode `Language Packs` use this protocol as their standard.
    • Official page for Language Server Protocol
      • Language Server Protocol documentation and specification page.
      • The Language Server Protocol (LSP) defines the protocol used between an editor or IDE and a language server that provides language features like auto complete, go to definition, find all references etc. The goal of the Language Server Index Format (LSIF, pronounced like "else if") is to support rich code navigation in development tools or a Web UI without needing a local copy of the source code.
  • TODO / FIXME
  • Themes

Questions

  • Should I install Visual Studio Code normally or use the Windows Store?
    • My Decision
      • I am going to stick with the normal installer.
      • I am not convinced why I should use the store one and also the store one might be insatalled for a single user.
    • Research
      • Why Download Visual Studio/VS Code from Microsoft Store? | Visual Studio Magazine - Is there any advantage to installing them through the Windows Store rather than normally?
      • VSCode on Windows: .EXE vs .MSI vs Microsoft Store, any real difference? | Reddit - Before posting this I tried to look around the internet but didn't find a precise answer to this question nor something that was decently recent.
      • Difference between User and System Installer of Visual Studio Code | Stack Overflow
        • User setup for windows
          • Reference: https://code.visualstudio.com/updates/v1_26#_user-setup-for-windows
          • Announced last release, the user setup package for Windows is now available on stable. Installing the user setup does not require Administrator privileges as the location will be under your user Local AppData (LOCALAPPDATA) folder. User setup also provides a smoother background update experience.
          • If you are a current user of the system-wide Windows setup, you will be prompted to install user setup, which we recommend using from now on. Don't worry, all your settings and extensions will be kept during the transition. During installation, you will also be prompted to uninstall the system-wide setup.
        • FixMaestro
          • I installed the user version side-by-side with the system version with no problems. The basic differences between the two is that the system version installs on the file system like every other app. The user install is basically a click-once (or web installer) version that installs in the User folder of the machine.
          • The settings made to VS Code in the system version save for Everybody on the computer and the user version the settings are only for the user. I find that the behavior of the user version is a bit annoying for me because I have reasons to want to open multiple copies of VS Code at the same time and the user version only allows one instance. Otherwise, there's not really anything different between the two as far as I can tell.
  • In VSCode settings is \n the same as LF, and \r the same as CR, so why display both?
    • Yes they are the same.
    • You can only select \n or \r when selecting `Files: Eol`. LF and CR are displayed for information purposes.
    • LF and CR are used as the options in Prettier.

Tutorials

A collection of tutorials on various topics.

Getting Started / Courses

  • Setting up Visual Studio Code | Visual Studio Code - Get Visual Studio Code up and running.
  • you NEED to use VS Code RIGHT NOW!! - YouTube | NetworkChuck
    • Everyone I know uses VS Code (Visual Studio Code). It doesn’t matter what you’re doing, hacking, coding, managing servers, VS Code is the defacto tool for IT admins and engineers. In this video, I (NetworkChuck) will show you how to get started with VS Code and how to use it to change the way you do everything! I’ll also take a few moments to show you how I use VS Code.
    • When on any GitHub repo, if you press the period "." then it will change the page to an online VSCode editor.
    • VSCode can be installed in the cloud.
    • The music on the video is annoying.
  • Getting started with Visual Studio Code - Official Docs - In this tutorial, we walk you through setting up Visual Studio Code and give an overview of the basic features.
  • Visual Studio Code Crash Course - YouTube | freeCodeCamp.org
    • Visual Studio Code (VS Code) is a free code editor made by Microsoft. In this course you will learn how to use this popular code editor. You will also learn tips and tricks to make it even easier to use.
    • 4 Years old
  • Visual Studio Code Full Course - VS Code for Beginners - YouTube | freeCodeCamp.org
    • Master Visual Studio Code (VS Code) and increase your programming productivity. You will learn the basics of VS Code along with tips and tricks to become a super user. You will also learn how to install and use common extensions for JavaScript, Python, and PHP.
    • 3 Years old
    • Keyboard shortcuts.
  • Visual Studio Code Tutorial for Beginners - Introduction - YouTube | Academind - Are you looking for a free, cross-platform and highly customizable code editor? Learn VS Code!
  • How to get started with VS Code - YouTube | Kevin Powell
    • When we first get started with VS Code, it can feel a little overwhelming, so in this video I take a look at the basics, starting off with a fresh install of VS Code and I explore the very basics of opening folders vs. files, how the tabs work, and a few basic settings.
    • Getting started with VSCode for Web Development
    • Extensions: Emmet
    • Theme: Atom Dark One
  • VSCode Power User | Learn Visual Studio Code | Video Course
    • After 10 years with Sublime Text, I switched to VSCode — the new open source cross-platform editor everyone's talking about. I've spent over a thousand hours perfecting my setup to help you switch today and bring all your custom settings and the power user workflows for HTML/CSS, GitHub/Git & Open Source, supercharged Markdown, and everything from JavaScript to PHP, Go, Python, C++, C#, ROR & 50+ Extensions. → I'm sharing it all in five hours — 65 videos online course.
    • VSCode, JavaScript, PHP, Docker, Debugging and more.
    • Watch the intro video for a better Idea.
    • I have not purchased or used this course.
  • Code 2020 - YouTube - Hi, I'm Matt Bierner! I work on VS Code and created this channel to share some of my favourite tips and tricks for working efficiently with VS Code.
  • Visual Studio Code Tutorials - Neutron Dev - Discover everything you need to know about Visual Studio Code to boost your productivity and streamline your coding experience.
  • VS Code Search - freeCodeCamp.org - Browse thousands of programming tutorials written by experts. Learn Web Development, Data Science, DevOps, Security, and get developer career advice.

Web / HTML

TypeScript

Python

TOML

  • Python and TOML: New Best Friends | Real Python
    • TOML is a configuration file format that's becoming increasingly popular in the Python community. In this tutorial, you'll learn the syntax of TOML and explore how you can work with TOML files in your own projects.
    • TOML stands for Tom’s Obvious Minimal Language.
    • Its human-readable syntax makes TOML convenient to parse into data structures across various programming languages.
    • In Python, you can use the built-in tomllib module to work with TOML files.
    • TOML plays an essential role in the Python ecosystem.
    • Many of your favorite tools rely on TOML for configuration, and you’ll use pyproject.toml when you build and distribute your own packages.
  • TOML: Tom's Obvious Minimal Language
    • A config file format for humans.
    • TOML aims to be a minimal configuration file format that's easy to read due to obvious semantics. TOML is designed to map unambiguously to a hash table. TOML should be easy to parse into data structures in a wide variety of languages.
    • A configuration file format designed to be easy to read and write. It uses a simple syntax that consists of key-value pairs, sections, and comments.

C++

JSON vs JSONC vs JSON5

  • JSON5: is a superset of JSON, which includes all the functionality of JSON and adds additional features that make it easier to work with. However, JSON5 is not a widely adopted standard and may not be supported by all JSON parsers. JSON is a more widely used and accepted format, but JSON5 can be a useful tool for certain use cases where additional flexibility is needed.
  • JSONC:  JSONC (JSON with comments) is a proposed extension to the JSON format that allows developers to include comments in their JSON data structures.
  • JSON5 vs JSONC: JSONC was created by Microsoft and is used in VS Code. While JSONC is an extension of JSON, it lacks a specification and is incompatible with other tools and tooling. JSONC allows developers to add comments to their JSON data, but that's the only significant benefit it offers over JSON.
  • JSON5 & JSONC Explained: Lenient JSON Standards and Formatting Support - Go Tools
    • Understand the new syntax, compatibility differences, and formatting tools for JSON5 and JSONC so you can write more readable, safer data structures.
    • JSON (strict) vs JSON5 vs JSONC comparison tables
    • Spec maintainers:
      • JSON = ECMA
      • JSON5 = Community (A. Rauschmayer)
      • JSONC = Microsoft / VS Code
  • JSONC | Specification
    • JSONC (JSON with Comments) is an extension of JSON (JavaScript Object Notation) that allows comments within JSON data.
    • This specification defines the syntax and semantics of JSONC.
  • What is JSONC and is it any better than JSON? | How-To Geek - JSON has become a near-ubiquitous data format, used in API responses, save game files, and configuration. But many people feel it can be better, and various attempts have been made to expand or improve it. JSONC is one of those attempts.

Joomla

A collection of Joomla related links.

Debugging

This is currently being dealt with in this article:

Debugging with VSCode and Edge | QuantumWarp - I will cover how to debug languages and CMS that I use with VSCode, Edge, Xampp, xDebug and other diagnostic tools as required.

Extension Development

Extension and VSCode Diagnostics

  • Extension Bisect Utility
  • Selective Start / No Extensions
  • Poor performance after latest update / Generate a Performance Profile / The UI is becoming slow and unresponsive,
    • > Developer: Toggle developer tools
    • Then record a profile from the performance tab.
    • Otherwise it's likely in the Extension host, and running Extension Bisect can help find out which extension is causing issues if you can repro quickly enough.

Source Control (Git / GitHub)

  • The Source Control icon looks a little like a `USB symbol` or a `Vertical Share Icon`. Either way, 3 balls and 2 lines.
  • You need to install Git for Windows to use Git in VSCode.

Documentation

  • Using Git source control in VS Code (Source Control \ Overview) - Visual Studio Code source control management with integrated Git support.
    • Working in a Git repository
    • Cloning a repository
    • Initialize a repository
    • Commit
    • Git blame information
    • Review uncommitted code changes with AI
    • Branches and Tags
    • Remotes
    • Source control graph
    • Git Status Bar actions
    • Gutter indicators
    • Merge conflicts
    • Viewing diffs
    • Timeline view
    • Git output window
    • VS Code as Git editor
    • Working with GitHub Pull Requests and Issues
  • Introduction to Git in VS Code (Source Control \ Introduction to Git) - Our beginner's guide covers everything you need to know, from setting up a repository to committing changes and collaborating with others. Learn Git today and streamline your development workflow.
    • Set up Git in VS Code
    • Open a Git repository
      • Clone a repository locally
      • Initialize a repository in a local folder
      • Open a GitHub repository in a codespace
      • Open a GitHub repository remotely
    • Staging and committing code changes
    • Pushing and pulling remote changes
    • Using branches
    • Using Git in the built-in terminal
  • Working with GitHub in VS Code (Source Control / Collaborate on GitHub) - Working with GitHub Pull Requests and Issues in Visual Studio Code
    • Getting started with GitHub Pull Requests and Issues
    • Setting up a repository
      • Cloning a repository
      • Authenticating with an existing repository
    • Editor integration
    • Pull requests
    • Issues
    • GitHub Repositories extension

Tutorials

Git for Windows

You need `Git for Windows` to use Git in VSCode.

File Locations

  • Configuration: 
    C:\Program Files\Git\etc\gitconfig

Download

From any of these locations as they all point to the same files.

Installation

These settings used below are well thought out and allow for a fully professional and granular configurable projects.

I have also made it so the default EOL is LF, however you can override the EOL on a per-repository. If you want CRLF as the default EOL then you should modify the steps as required. - might move to line endings

Follow all of the steps.

Installer Steps
  1. Select Destination Location
    • "C:\Program Files\Git" (this is the default option)
  2. Select Components
    Leave as default, unless specified below:
    1. Check daily for Git for Windows updates = Tick
      • Notes
        1. Keeping your software up to date is a normal thing to do and good for security.
    2. Add a Git Bash Profile to Windows Terminal = Tick
    3. Scalar (Git add-on to manage large-scale repositories) = Untick
      • Notes
        • I don't have any mammoth projects that would benefit from this caching technology.
      • Research
        1. GitHub - microsoft/scalar - Scalar: A set of tools and extensions for Git to allow very large monorepos to run on Git without a virtualization layer.
  3. Select Start Menu Folder:
    • Git (this is the default option)
  4. Choosing the default editor used by Git:
  5. Adjusting the name of the initial branch in new repositories:
  6. Adjusting your PATH environment:
    • Git from the command line and also from 3rd-party software (this is the default option)
  7. Choosing the SSH executable:
    • Use bundled OpenSSH
  8. Choosing HTTPS transport backend:
    • Use the native Windows Secure Channel library (this is the default option)
    • Notes
      • If you are using Windows you might as well take advantage of it's features.
      • Using the windows store has it's benefits such as adding in your own Root CA certificates for your corporate servers and getting regular certificates updates from Microsoft.
      • If you are just using GitHub, GitLab or some other public Git provider then both options will work for you.
      • If you work in an Active Directory environment, you may need to switch to Windows Store certificates.
    • Research
  9. Configuring the line ending conversions:
    • Checkout as-is, commit as-is
    • Notes
  10. Configuring the terminal emulator to use with Git Bash:
    • MinTTY (this is the default option)
  11. Choose the default behavior of `git pull`:
    • Fast-forward or merge (this is the default option)
  12. Choose a credential helper:
    • Git Credential Manager (this is the default option)
    • Research
  13. Configuring extra options:
    1. Enable file system caching: Ticked (this is the default option)
    2. Enable symbolic links: Unticked (this is the default option)
Windows Configuration
  1. Enable long file paths in Windows 10/11
Git Configuration
  1. Enable long paths in your local Git 
    git config core.longpaths true

Tutorials

Notes

  • Long File Path / Long Filenames
    • I get errors trying to check out files with long path names. - FAQ | Git for Windows - Windows file paths are by default limited to 260 characters. Some repositories may have committed files which contain paths longer than the limit. By default, Git for Windows does not support long paths, and will print errors when trying to perform any operation on a long file name. Set the configuration property core.longpaths to true to allow certain Git operations to properly handle these files. See this wiki page for more information.
    • Git cannot create a file or directory with a long path - FAQ | Git for Windows
      • Windows does not properly support files and directories longer than 260 characters. This applies to Windows Explorer, cmd.exe and many other applications (including many IDEs as well as bash, perl and tcl that come with Git for Windows).#
      • How to enable long paths support 
        git config core.longpaths true

Moving Git Repositories / Update Local Git Repository [remote "origin"] URL

  • Authentication for GitHub is handled by the GitHub Pull Request extension.
  • The .git/config does specify the user so I have to assume this is used.
  • The [remote "origin"] value simply tells your local Git repo “When I push/pull to origin, use this URL.”
  • VScode does not have GUI support for most Git commands and settings.

So you are here because you have setup your local workspace, have connected your GitHub repository, but now you (or someone else) has moved or renamed the remote GitHub/Git repository and it needs to be reconnected.

The instructions below:

  • will edit the [remote "origin"] value in the .git/config file which is in your Project Folder.
  • assumes no permissions need to be changed because your GitHub username has permissions in both locations.

Instructions

  • Open the relevant project folder (Workspace) in VSCode
    • This is required for VSCode to select the right settings etc..
  • View the current Git Repository URLs
    • It is useful to check the values before you start so you know if they are updated later.
    • Open the terminal in VSCode with Ctrl + '
    • Run the command 
      git remote -v
      • This command will now show both the (fetch) and (push) URLs which is good so you can make sure the connection is setup correct at both ends.
  • Update the [remote "origin"] URL (pick a method):
    1. Directly edit the .git/config file
      • Open your .git/config file directly in VSCode and then this run the command from the palette (do not prefix with >)
        .git/config
      • In the opened .git/config file, look for this section: 
        [remote "origin"]
    url = https://github.com/old-user/old-repo.git
      • Change the url to your new GitHub repo URL: 
        [remote "origin"]
    url = https://github.com/your-username/new-repo.git
      • Save the File
    2. Use Git commands
      • Open the terminal in VSCode with Ctrl + '
      • Replace the URL with the new location of your GitHub repository and run this command: 
        git remote set-url origin https://github.com/your-username/new-repo-name.git
      • Or if you're using SSH, run this command: 
        git remote set-url origin git@github.com:your-username/new-repo-name.git
  • Verify the Git repository URLs have been updated
    • Open the terminal in VSCode with Ctrl + ' and run the command: 
      git remote -v
  • Now your Git operations via the Source Control GUI (commit, push, pull, fetch, etc.) will work with the new remote repository.

Notes

  • You can open your Git Config file with Windows Explorer. Navigate to, and open this file: 
    `.../YourProjectFolder/.git/config`
  • The **/.git files are hidden from the Explorer View
    • There is no simple toggle to show these.
    • You can still directly access them through the command palette.
    • I would leave these files hidden, but if you must unhide them you can do it in a couple of ways:
      1. Directly
        • Go to your User/Workspace settings (settings.json)
        • Add this line to allow hidden folders: 
          "files.exclude": {
  "**/.git": true
}
      2. Via the GUI
        • Settings --> (User / Workspace) --> Text Editor --> Files --> Exclude
        • Edit as required
  • Git: how to change the remote repository of a project • SomeDevTips - This article explains how you to change the remote repository of your git project if the git server has been renamed or changed.

Node.js and npm for Windows

Node.js (a.k.a NodeJS) is a prerequisite for a lot of VSCode extension , so if you want to get the most out of VSCode, Node.js is a must. The journey to getting the right setup can be tricky especially if this is the first time you have looked at Node.js. These instructions will guide you through getting VSCode working with 2 of the most popular VSCode extensions (ESLint and Prettier) with explanations so you understand why.

  • npm - We're GitHub, the company behind the npm Registry and npm CLI.
  • See also "npm Packages" for various npm packages.
  • npmx - Package Browser for the npm Registry - a fast, modern browser for the npm registry. Search, browse, and explore packages with a modern interface.
  • Browsenpm.org | Nodejitsu Inc. - Browse packages, users, code, stats and more the public npm registry in style.Also has a cheatsheet on the home page for npm commands

Install Node.js (includes npm manager)

  • Only perform these actions in this section once per system/computer.
  • These instructions assumes you have not already tried to install Node.js before.
  • This will install the Node.js runtime and the npm package manager

Follow these instruction on how to install and Configure your Node.js Environment for VSCode.

  • Download the installer for Node.JS
  • Run the installer
    • Leave everything as default and click next, except:
      • (This is optional) On the Tools for Native Modules I ticked Automatically install the necessary tools just to future proof me but I am not sure if I needed them.
        • NB: I had the same issue, but after 20 minutes, the indicator was still blinking, so I clicked on the terminal window again, and pressed ENTER. This allowed the script to finish.
        • The packages that were installed with this option are: 
           - chocolatey-compatibility.extension v1.0.0
 - chocolatey-core.extension v1.4.0
 - chocolatey-dotnetfx.extension v1.0.1
 - chocolatey-visualstudio.extension v1.11.1
 - chocolatey-windowsupdate.extension v1.0.5
 - dotnetfx v4.8.0.20220524
 - KB2919355 v1.0.20160915
 - KB2919442 v1.0.20160915
 - KB2999226 v1.0.20181019
 - KB3033929 v1.0.5
 - KB3035131 v1.0.3
 - python v3.13.4
 - python3 v3.13.4
 - python313 v3.13.4
 - vcredist140 v14.44.35208
 - vcredist2015 v14.0.24215.20170201
 - visualstudio2019buildtools v16.11.47
 - visualstudio2019-workload-vctools v1.0.1
 - visualstudio-installer v2.0.3

Create a new Node.js Project

  • Node.js and npm being installed is a prerequisite.
  • You need to initialise npm on every project where you want to use Node.js and it's related packages.

Open a VSCode Workspace

  • Create or open your VSCode project folder.

Initialise npm

  • This will generate a package.json file
    • This file can hold npm plugin configurations.
    • Can be edited manually after creation.
  • Run this command in the terminal  
    npm init

or

npm init -y
    • The -y flag when passed to NPM commands tells the generator to use the defaults instead of asking the usual questions. Use this flag if you are going to edit the package.json file manually later.
    • When run, you will be prompted with a series of questions used to gather information about your project, pressing enter will use the displayed defaults.
    • Use the default values uness you know why you are changing them.
    • The values in this config file can be changed later.
    • The npm init command is used to create a new Node.js project by generating a package.json file in the project directory. This file contains metadata about the project, such as its name, version, description, main file, scripts, author, license, and dependencies.
    • npm init is only required to be run in the local project folder, it is never needed to do anything globally.

Notes

Websites

  •  Node.js — Run JavaScript Everywhere
    • Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
    • A free, open-source, cross-platform JavaScript runtime environment that lets developers create servers, web apps, command line tools and scripts.
  • npm | Home
    • All npm packages are downloaded from here (e.g. eslint - npm)
    • GitHub runs the npm Registry and npm CLI.
  • npm trends: Compare NPM package downloads - Which NPM package should you use? Compare packages download stats, bundle sizes, github stars and more. Spot trends, pick the winner.

General

  • Local vs Global installation of npm package
    • TL;DR
      • Using local for package installations is preferred because:
      • Some packages are per project based (e.g. ESLint)
      • You can share you dev environment with other colleagues
      • You can specify particular version numbers for each project.
      • This seems to be the common paradigm that programmers use.
      • Some packages such as HTMLhint can run fine globally becasue they are single packages without external rule and plugin packages to handle. ESLint could fix this but I beleive this is intentional rather than a limitation of npm.
      • Installing globally should be reserved for commands (CLI tools) and packages that are to be used as tools rather than dependencies. There are exceptions such as ESLint which is a tool but has to be installed locally becasue of it's the use of the Flat Config system.
    • Downloading and installing packages globally | npm Docs - Installing a package globally allows you to use the code in the package as a set of tools on your local computer.
    • Downloading and installing packages locally | npm Docs - You can install a package locally if you want to depend on the package from your own module, using something like Node.js require. This is npm install's default behavior.
    • Understanding Local and Global npm Packages | by Lewistech | Medium - In this article, we will explore the concepts of local and global npm packages, highlighting their differences, installation locations, and when it is appropriate to install a package locally versus globally.
    • whats the difference between installing a package locally vs globally on npm ? | Reddit
      • If you install a package locally you are only able to use the keywords/commands in the directory you installed them.
      • For example if you instal a package in /Users/projects/currentProject you have to cd into that folder to call the package commands if you installed it in that directory.
      • But if you install it globally you don’t have to be in any specific folder to use it, you can just type the commands into bash or power shell from any dir.
      • Also while working on a nodejs project you have the pleasure of installing with the flag -D that will add the package dependency for only development.
      • The main advantage btw is that you can use different version of the same package per project if you install the package locally, but if you install globally you must use just one version.
      • Most of the time if you need a package specifically for your project, you install it locally. But some packages can be used externally and in this case they are installed globally. For example recently I needed AWS Amplify to host my front-end application. I installed its npm package globally and thanks to that, I can use it on Windows CMD using the “amplify” command.
    • npm global or local packages | Flavio Copes - When is a package best installed globally? Why?
    • [Prettier] Install globally vs. locally (on a project basis)? | Reddit
      • Q:
        • What's the difference between using/installing Prettier globally vs. on a project basis? I googled this but all the entries show up as simply "ways to install prettier". Curious on how one would decide which to use and for best practices. How would you update/maintain it if you're working with other people?
      • A:
        • Well, if you want the same version of Prettier to apply to all of the projects that it's a dependency of, then you can install it globally. If you want to use some version-specific (for example deprecated) features on a given projects without affecting the rest, you can install it per project.
        • What editor are you using? VSCode's Prettier extension essentially works like a global install without the need to use it per project.
        • I would recommend getting into the habit of installing everything locally. Unless you really do mean to use the package only as your personal CLI tool. Reason being, anybody working on these projects need access to the same tools (and versions) used for those projects.
    • Why you should stop installing npm packages globally | by Sebastien Dubois | JavaScript in Plain English
      • There is almost no use in installing npm packages globally
      • A few years back when I started using npm, I didn’t mind installing many packages globally. Nowadays, I see almost no use in installing npm packages globally.
    • Executing local NPM packages | by Jair Reina | Medium
      • There’s a recurring question I get asked about how to run NPM modules that are installed locally in your project without the need to install them globally.
      • In this article, I am going to list the options we have for achieving this (from what I know, of course).
    • How to avoid errors installing npm packages globally in Visual Studio Code – Cameron Dwyer
      • A common issue I hit is when installing npm packages globally; I get errors trying to do it from the Integrated Terminal Window.
      • This is because when you install npm packages globally they go into the nodesjs\node_modules directory in program files (rather than in the project folder where you are writing your code). Writing to folders under Program Files requires elevated privileges.
      • To get around this using the Integrated Terminal window in Visual Studio Code just make sure when you start Visual Studio Code that you run as an Administrator.
  • What is the difference between Node.js and JavaScript?
    • What is Node.js?
      • Node.js is a runtime environment built on Chrome's V8 JavaScript engine. It allows developers to run JavaScript code on the server side, enabling the creation of fast, scalable, and efficient network applications.
    • Difference between Node.js and JavaScript - GeeksforGeeks - This article explores the key differences between JavaScript and Node.js, detailing their roles, capabilities, and use cases to help you understand which technology is best for your project.
    • Node JS vs JavaScript: What's the Difference? - Compare Node JS vs JavaScript to understand their unique roles, and learn which technology is better suited for backend development or frontend coding.
    • What is the difference between Node.js and JavaScript? | Reintech media - This tutorial covers the differences between Node.js and JavaScript, including their history, use cases, and code examples. JavaScript is primarily used for client-side programming in web browsers, while Node.js enables developers to build server-side applications using JavaScript. By understanding their differences, you'll be better equipped to choose the right technology for your projects.
    • NodeJS vs JavaScript - A Detailed Comparison | Flexiple - Flexiple
      • Want to know how NodeJS compares to JavaScript? Check out this page for a detailed comparison between the two across various factors such as advantages, disadvantages, performance and use cases among others.
  • The difference between: .js, .cjs, .mjs
  • Can you have a npm package (eg ESLint) installed both locally and globally at the same time?
    • Yes, you can have both a local and global version of ESLint installed at the same time.
    • You can install an npm package both locally and globally in a single command, by using npm install twice, or running them as separate commands in the background. 
      npm install eslint --save-dev & npm install -g eslint
    • If both versions exist, the local version usually takes precedence when running ESLint in a project.
      • You can check which version is being used by running: 
        eslint --version
      • If you need to use the global version explicitly, you can run: 
        $(npm root -g)/eslint --version
  • Is the  --save-dev flag valid when installing globally?
    • No, the --save-dev flag is only valid for local installations, not for global ones.
    • When installing a package globally using: 
      npm install -g eslint
      • the package is not added to your project's package.json, so there’s no need for --save-dev. The -g flag already ensures it's available system-wide.
    • However, when installing locally with: 
      npm install eslint --save-dev
      • it gets added under "devDependencies" in your package.json, meaning it’s needed for development but not for production.
  • Can all npm packages be installed globally such as eslint-html?
    • Not all npm packages are meant to be installed globally — it depends on the purpose and how the package is designed.
    • Packages you can install globally:
      • You can install globally packages that expose a CLI (Command Line Interface) — these are tools you use from the command line.
      • CLI tools are usualy fine to install globally because of their nature they need to be in your system's PATH.
    • Packages not meant to be installed globally:
      • Some packages are libraries used in code, not command-line tools. These should be installed locally (inside a project).
    • Exceptions:
      • ESlint can be installed globally and locally, but it is designed to be run locally and now with the introduction of the `Flat Config` system, local scope is a must.
  • Does npm install --save-dev save files into my project folder?
    • Yes, npm install --save-dev does save files into your project folder, but here's how it works:
      • The package is downloaded from the npm registry.
      • It’s placed in the node_modules/ folder within your project directory.
      • A reference is added to devDependencies in your package.json file e.g. 
        "devDependencies": {
  "eslint": "^8.0.0"
}
    • Files added or modified
      • node_modules/ folder: Contains the actual installed package files and dependencies.
      • package-lock.json: Updated to reflect the exact version installed and its dependency tree.
      • package.json: Updated with the new dev dependency under devDependencies.
    • Important notes
      • node_modules/ can become very large, but it's not typically committed to version control (add it to .gitignore).
      • If someone else clones your project, they just need to run npm install, and all dependencies—including devDependencies—will be installed.

Commands

  • General
  • Cheatsheets
  • Restart ESLint
    • Command Palette 
      > ESLint: Restart ESLint Server
    • or restart VSCode
  • List Node, npm Packages and their Versions
    # View the current version of NodeJS
node -v


# List global packages
npm list -g

# List local packages
npm list


# This prints the version of npm itself:
npm -v <package-name>

# This prints a cryptic error:
npm version <package-name>

# This prints the package version on the registry (i.e., the latest version available):
npm view <package-name> version

# shows the latest in npm with extra information
npm show <package-name>
  • Add the package as a development dependency 
    npm install eslint --save-dev
npm i eslint -D
    • The commands above are the same.
    • Install as a  development dependency when the package is only needed during the development and not in production.
    • This switch will only work on local installs, it is not applicable to the global scope.
    • What is the difference between --save and --save-dev? - Stack Overflow
      • --save-dev (only used in the development, not in production)
      • --save (production dependencies)
      • --global or -g (used globally i.e can be used anywhere on the local system, similiar to install for `All Users` paradigm in Windows)
  • npm
    • About npm | npm Docs
      • npm is the world's largest software registry. Open source developers from every continent use npm to share and borrow packages, and many organizations use npm to manage private development as well.
    • An Absolute Beginner's Guide to Using npm
      • Beginning with npm can seem a bit daunting - give yourself a kickstart with our absolute beginner's guide to npm, and you'll be off your feet in no time.
      • install commands 
        npm install <module> # Where <module> is the name of the module you want to install
npm i <module> # Where <module> is the name of the module you want to install - using the i alias for installation
npm install <module> --save # Where <module> is the name of the module you want to install as a dependency
npm install <module> --save-dev # Where <module> is the name of the module you want to install as a Devloper dependency
npm install <module> --global # Where <module> is the name of the module you want to install globally
npm install <module> -g # Where <module> is the name of the module you want to install globally, using the -g alias
    •  Node.js — An introduction to the npm package manager | NodeJS - npm is the standard package manager for Node.js.
  • npx
    • npx allows you to run package binaries from the commandline in the correct context (i.e. local/global) without having to worry about their locations. This command remove the need to have packages installed gloablly (eg ESLint) and as a consequence those packages binaries in the system PATH.
    • After that, you can run ESLint on any file or directory like this: 
      npx eslint yourfile.js
  • nvm
    • NVM (Node Version Manager) is a tool that allows you to manage multiple versions of Node.js and npm on a single machine. When you install Node.js using NVM, npm is automatically installed along with it. This ensures that the npm version is always compatible with the specific version of Node.js you are using.
    • How to Install and Use NVM (Node Version Manager) | Linode Docs - Learn to use NVM to install Node.js on your computer. This guide shows you how to install and use NVM and how to install the LTS version of Node.js.
    • How to Install NPM Through NVM? - GeeksforGeeks
      • NVM is a popular tool that allows you to manage multiple versions of Node.js and npm on a single machine.
      • With NVM you can easily switch between different versions of Node.js making it convenient for working on multiple projects that may require different Node.js environments.
      • Installing npm through NVM ensures that the npm version is always compatible with the specific version of Node.js you're using.
    • Difference between NPM and NVM | Stack Overflow
      •  Nvm is nodejs version manager while npm is nodejs package manager. Benefits: Nvm can be used to install and manage multiple node versions on your PC. Ease of installation and usage.
  • --save-exact
    • What is the purpose of using --save-exact
      • When you delete your node_modules folder and you run npm install, the versions of the installed packages could get updated when higher ones are available and that can potentially break your application.
      • This flag explicitly sets the version number of the package.
      • Without the flag 
        "devDependencies": {
    "webpack": "^5.1.3",
}
      • With the flag - notice that the character ^ is not present. 
        "devDependencies": {
    "webpack": "5.1.3",
}

Tutorials

  • The Right Way to Share npm Dependencies / Copy npm project settings and modules.
    • Instead of copying node_modules, do this:
      • In the original project, make sure you have a clean package.json and package-lock.json. (clean means these 2 files are in sync with each other)
      • Copy these 2 files over to the new project.
      • Then run the following command to install them to the new project 
        npm install
    • This way:
      • You get the exact same dependencies
      • Your project is reproducible and portable
      • You avoid any platform-specific breakage
    • Links
  • Node.js
    • Node.js tutorial in Visual Studio Code - The Visual Studio Code editor has great support for writing and debugging Node.js applications. This tutorial takes you from Hello World to a full Express web application.
  • Using ESLint and Prettier
    • Prettier & ESLint in Visual Studio Code: The Ultimate Guide - YouTube
      • Learn how to set up Prettier and ESLint in Visual Studio Code to keep your code looking sharp and error-free!
      • Prettier and ESLint each have their own role: Prettier ensures your code style is clean and consistent, while ESLint catches errors and enforces JavaScript best practices. However, they don’t always work seamlessly together. In this video, we'll show you how to configure Prettier and ESLint to play nicely and how to optimize Visual Studio Code to get the best out of both tools.
      • Prerequisites: Node.js, VSCode, ESLint (VScode/NPM), Prettier (VSCode/NPM)
    • Using ESLint and Prettier in Visual Studio Code - YouTube | Microsoft Visual Studio - Josh shows how you can use ESLint to set rules for your JavaScript/TypeScript code and how you can easily format it. He uses VS Code here, but you can do the same things in Visual Studio. 
  • Using ESLint
    • Use ESLint to Validate Your JavaScript in Visual Studio Code - Carl de Souza
      • In this post, we will look at how to set up ESLint in Visual Studio Code, in order to check JavaScript files for errors.
      • With NPM installed, you have access to thousands of packages.
    • How to Set Up ESLint in 2025! (Beginner's Guide) - YouTube | The Common Coder
      • Let's learn how to install and configure ESLint!
      • ESLint is a powerful tool designed to help you catch errors and enforce coding standards in your JavaScript projects. In this video, we'll guide you through the process of installing ESLint and configuring it to ensure your code is clean, consistent, and free of common mistakes. Whether you’re a complete beginner or you've used ESLint before, understanding how to set up ESLint effectively will help improve your code quality and overall development workflow.
      • Prerequisites: Node.js, VSCode, understand JavaScript
    • ESLint and Visual Studio Code: The Ultimate Setup Guide! - YouTube | The Common Coder
      • In this video we'll learn the most effective way to use ESLint with Visual Studio Code!
      • ESLint is an essential tool for developers wanting to write clean and error-free JavaScript code. In this video, we'll learn how to bring ESLint's features into Visual Studio Code by installing the official ESLint extension. We'll cover the prerequisites for using the ESLint extension, how to install it into VS Code, and explore its powerful features like real-time feedback, enabling and disabling rules, and automatically fixing certain types of errors. If you're looking to get the most out of ESLint, the ESLint Extension for Visual Studio Code is a must-have tool in your developer toolbox.
      • Prerequisites: Node.js, VSCode, ESLint installed in a project
    • VSCode and ESLint Setup - YouTube
      • Combine ESLint and VSCode for some helpful code style/quality highlighting, learn what ESLint is, and how to configure ESLint and VSCode.
      • This video is geared towards developing a NPM package rather than a global install for VSCode.
      • Make a NPM project by running the command: 
        npm init -y
        • This transform the directory into an npm package by creating a package.json file.
      • Installing ESLint locally as a Development Dependency 
        npm i eslint --save-dev
        • We want to install eslint as a development dependency becasue it is used while developoing a project, it is not needed for the program to run out in production.
      • Create an ESlint configuration file by using the command 
        npm init @eslint/config
        • This will start a wizard with questions that will allow the writing of the a ESLint config file eslint.config.mjs
    • How to Setup ESLint .eslintrc Config – Duncan Leung - covers a lot of different areas of ESLint such as plugins.
    • Run ESlint manually 
      # Checking only
npx eslint "**/*.html"

# with autofix:
npx eslint "**/*.html" --fix
    • ESLint Getting Started: A Comprehensive Guide - Toxigon - ESLint Getting Started: A Comprehensive Guide to improving your JavaScript code quality with ESLint. Learn installation, configuration, best practices.
    • A Comprehensive Guide to ESLint: From Basics to Advanced | by DhineshKumar Thirupathi | Medium - This guide will walk you through the basics of ESLint and lead you to more advanced configurations and customizations.
    • ESLint Documentation | Pasith Senevirathna - This document provides a comprehensive guide to setting up and use ESLint in your projects. It covers ESLint installation, configuration, rules, and best practices.
    • How to Use the ESLint Command (with Examples) - An awesome guide for the most useful CLI commands
    • The ESLint CLI: A Deep Dive for JavaScript Developers - The Command Line Interface (CLI) is how you interact with ESLint from your terminal. It provides a set of commands and options to configure and run ESLint checks on your JavaScript files.
  • Install Tutorials
    • Install Node on Windows - Carl de Souza - Simple to follow instructions
    • How to Install NPM and Node.js on Windows and Mac Devices? - Learn what is NPM, how to install Node.js and NPM on Mac and Windows, Node.js installation with Homebrew and NVM and few points to consider while installing Node.js and NPM.
    • [VS Code] - How to completely remove npm from your system - | SheCodes - Learn how to completely remove npm from your system using the command prompt or terminal in this step-by-step guide. Back up your packages before proceeding.
    • VSCode ESLint, Prettier & Airbnb Style Guide Setup - YouTube | Traversy Media - In this video we will setup linting with the Airbnb style guide for clean and consitent JavaScript code in VSCode
      • Create a package.json 
        npm init -y
      • Install ESlint and Prettier 
        npm i -D eslint prettier eslint-plugin-prettier eslint-config-prettier eslint-plugin-node eslint-config-node
        • i = install
        • -D = dev dependency (save as --save-dev)
    • How to Install ESLint in VS Code - YouTube | Code Wizard - Learn how to install ESLint in vs code. We will install ESLint, install the ESLint VS Code extension, setup the config file, and give a basic demonstration on how to use ESLint.
    • ESLint Setup in Node.js: A Detailed Guide - Maxim Orlov - Unlock the power of ESLint in Node.js! Dive into this beginner-friendly guide for seamless integration and smarter coding.
    • Setting up ESLint and Prettier with VS Code | jeffyang.io - Setting up ESLint and Prettier with VS Code
      • Install ESLint and Prettier 
        # install eslint globally
npm install -g eslint

# install prettier globally
npm install -g prettier
      • Install ESLint & Prettier Plugins for VS Code
      • Configuring ESLint and Prettier 
        npm install --save-dev eslint-config-prettier eslint-plugin-prettier
        • As I mentioned earlier, ESLint and Prettier will conflict with each other if not set up with care. Fortunately, because this is such a widely recognized problem, there are packages that are made to solve exactly this problem.
          • eslint-config-prettier
          • eslint-plugin-prettier
        • This way, you won’t have two different rules that conflict with each other.
        • Curious what the --save-dev flag does?
          • By intalling with --save-dev flag, npm installs the packages eslint-config-prettier and eslint-plugin-prettier as devDependencies. This differs from the default behavior of npm install which installs it as a dependency to run the application, and places the downloaded files in node_modules.
      • initialize ESLint within our project. 
        eslint --init
        • Follow the wizard and answer the questions.
        • Once the setup is successful, you should see a file eslintrc.{js/json/yaml} based on the format you chose your configuration file to be in.
      • set up Prettier locally 
        # install prettier as local devDependency
npm install --save-dev prettier
        • That should have installed Prettier as a local devDependency.
      • Now, we need to create a configuration file for Prettier, and tell it how to format our code. 
        # in your project root directory
touch .prettierrc
        • The file format .prettierrc might be out of date.
    • Configure VSCode settings as required
      • Such as format on save..
  • Install Node.js and NPM
    • Downloading and installing Node.js and npm | npm Docs
      • To publish and install packages to and from the public npm registry or a private npm registry, you must install Node.js and the npm command line interface using either a Node version manager or a Node installer.
      • We strongly recommend using a Node version manager like nvm to install Node.js and npm.
      • We do not recommend using a Node installer, since the Node installation process installs npm in a directory with local permissions and can cause permissions errors when you run npm packages globally.
  • Install Node.js and NPM, vscode, ESLint, Prettier videos
  • Install Prettier
    • Setting Up Prettier with VS Code: A Step-by-Step Guide for Better Code Formatting - Toxigon
      • Learn how to set up Prettier with VS Code for consistent code formatting. This step-by-step guide covers installation, configuration, integration with ESLint, and troubleshooting tips.
      • Install Prettier via npm 
        npm install --save-dev --save-exact prettier
        • The --save-dev flag adds Prettier to your devDependencies, and --save-exact ensures that the exact version is installed.
      • Configure VS Code Settings 
        {
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "prettier.requireConfig": true
}
        • editor.formatOnSave: Automatically formats your code when you save a file.
        • editor.defaultFormatter: Sets Prettier as the default formatter.
        • prettier.requireConfig: Ensures that Prettier only formats files if a configuration file is present.
      • Using Prettier with ESLint
        • If you're using ESLint for linting your JavaScript/TypeScript code, you might run into conflicts with Prettier. Luckily, there's a way to make them play nicely together.
        • The install command 
          npm install --save-dev eslint eslint-config-prettier eslint-plugin-prettier
          • eslint: The linter itself.
          • eslint-config-prettier: Disables ESLint rules that conflict with Prettier.
          • eslint-plugin-prettier: Runs Prettier as an ESLint rule.
    • Install · Prettier.io - This give instructions on how to install the npm package.
      • Installing locally command: 
        npm install --save-dev --save-exact prettier
      • If you use ESLint, install eslint-config-prettier to make ESLint and Prettier play nice with each other. It turns off all ESLint rules that are unnecessary or might conflict with Prettier. There’s a similar config for Stylelint: stylelint-config-prettier

Use a single /node_modules/ instance between Projects?

I am managing many small projects, how can I use just one set of /node_modules/? I will add a collection of my notes here. I have not tested or done this, it is just theory.

This is so when you are using a package can only be used locally, has a large footprint and you need to use it for many different projects.

Multi-root Workspaces  (Monorepo)
  • Creating
    • Create one root project folder
    • In this folder create single folder for each repo
  • Example structure 
    /my-projects
  /node_modules ← shared
  /project-a
    /src
  /project-b
    /src
  /project-c
    /src
  • Using
    • Utilise VSCode Multi-root Workspaces configurations
    • Install the node modules into the root project folder only
  • Links
    • Multi-root Workspaces - You can open and work on multiple project folders in Visual Studio Code with multi-root workspaces.
    • Multi-root workspaces - VS Code extension | Biome
      • A multi-root workspace is a workspace where there are multiple workspace folders. In this case, the extension will automatically create a Biome instance per workspace folder.
      • Nice diagram
    • Documentation update - Multi-root workspaces - What triggers this · Issue #646 · biomejs/biome-vscode · GitHub
      • Q: What triggers the multi-root behaviour of Biome?
      • A:
        • So Biome can tell if these folders are actually workspaces rather than just normal folders. I am guessing folders and workspaces are internally referenced differently but appear the same in the explorer.
        • That's correct. Actually, VS Code makes this distinction. When the extension starts, it retrieves the list of existing workspace folders and starts an LSP session for each (assuming biome is enabled in that workspace folder)
Symlinks

 Troubleshooting

Using VSCode

I will cover more relevant settings and configurations to get you started with VSCode. If you have watched some of the starter videos (if not, you should) the information here will be a lot more relevant and easier to follow.

User Interface Overview

It is good to know what the different things you are using are called and what they do. This makes it much easier for customisation later.

User interface - A quick overview of the Visual Studio Code user interface. Learn about the editor, window management, and special UI to handle source control, extension management, full text search and more.

Visual Studio Code (VS Code) provides a highly customizable and intuitive user interface designed to maximize productivity. Its layout is divided into several key components, each serving a specific purpose to streamline development workflows. Key Components of the VS Code UI

  1. Editor: The central area where you edit files. You can open multiple editors side by side, both vertically and horizontally, to work on multiple files simultaneously.
  2. Primary Side Bar: Located on the left, it includes views like the Explorer for managing files and folders. You can move it to the right or toggle its visibility using shortcuts like Ctrl+B (Windows/Linux) or Cmd+B (macOS).
  3. Secondary Side Bar: Positioned opposite the Primary Side Bar, it can hold additional views like Chat. You can drag and drop views between the Primary and Secondary Side Bars.
  4. Activity Bar: Found on the far left, it allows you to switch between Views such as Explorer, Search, Source Control, and Extensions. You can customize its position or hide it entirely.
  5. Status Bar: Located at the bottom, it displays information about the current project, such as Git branch, file encoding, and line/column numbers.
  6. Panel: Positioned below the editor (by default), it contains tools like the integrated terminal, output logs, and debug information. You can move the Panel to the left or right for better vertical space.
  7. Tabs: Open files are displayed as tabs above the editor. You can reorder, pin, or group tabs for better organization. Preview tabs are italicized and reused unless explicitly opened.

Advanced Features for Productivity

  • Side-by-Side Editing: Split the editor using shortcuts like Ctrl+\ (Windows/Linux) or Cmd+\ (macOS) to view and edit files simultaneously.
  • Floating Windows: Drag an editor tab out of the main window to create a floating window, ideal for multi-monitor setups.
  • Minimap: A code outline on the right side of the editor for quick navigation. You can move it to the left or disable it via settings.
  • Sticky Scroll: Displays the starting lines of visible nested scopes at the top of the editor for better navigation within a file.
  • Breadcrumbs: A navigation bar at the top of the editor showing the file path and symbol hierarchy. It can be toggled on or off.

Customization Options

  • Themes: Choose from a variety of color themes or create your own. Use the command palette (Ctrl+Shift+P or Cmd+Shift+P) to search for "Preferences: Color Theme."
  • Settings: Modify settings globally or per workspace using the settings.json file. Access it via Ctrl+, (Windows/Linux) or Cmd+, (macOS).
  • Zen Mode: Focus on your code by hiding all UI elements except the editor. Activate it with Ctrl+K Z (Windows/Linux) or Cmd+K Z (macOS).

Views and View Containers Explained

  • View Containers can be located in the Primary Side Bar, Secondary Side Bar or the Panel.
  • People sometimes refer to View Containers or Views as Panels, but this is the wrong terminology.
  • People sometimes refer to a View Container as a View, if it only has one content window (i.e. no accordian items). I also think this is the wrong terminology.
  • When a View Container it is located in a Side bar, then it will have a corresponding icon in the Activity Bar.
  • When a View Container it is located in the Panel, then it will be presented as Tab.
  • Views are specific to a particluar View Container.
  • Examples:
    • Explorer is a View Container and each accordion item (e.g. Open Editors, Outline, timeline) within this container is a View.
    • Problems Panel is not a Panel, it is a View Container in the Panel area.
  • Views | Visual Studio Code Extension API
    • UX guidelines for views in a Visual Studio Code extension.
    • Views
      • Views are containers of content that can appear in the Sidebar or Panel. Views can contain Tree Views, Welcome Views, or Webview Views and can also display View Actions. Views can also be rearranged by the user or moved to another View Container (for example, from the Primary Sidebar to the Secondary Sidebar). Limit the number of Views created as other extensions can contribute in the same View Container.
    • View Containers
      • View Containers, as the name implies, are the "parent" container in which Views are rendered. Extensions can contribute custom View Containers to the Activity Bar/Primary Sidebar or to the Panel. Users can drag an entire View Container from the Activity Bar to the Panel (or vice versa) and can also move individual Views.
    • View Locations
      • Views can be placed in existing View Containers, such as the File Explorer, Source Control (SCM) and Debug View Containers. They can also be added to a custom View Container via the Activity Bar. In addition, Views can be added to any View Container in the Panel. They can also be dragged to the Secondary Sidebar.
  • Panel | Visual Studio Code Extension API
    • UX guidelines for the Panel Bar in a Visual Studio Code extension.
    • The Panel functions as another main area to display View Containers.
  • What's the difference between `view` and `panel`? · microsoft/vscode-discussions · Discussion #348 · GitHub - This has an excellent image explaining the different areas.

 Here are some example Views that you can use for navigating your code.

  • Explorer View Container: This holds various Views offering different functionality.
  • Outline View: Displays a symbol tree of the active file, helping you navigate its structure.
  • Timeline View: Shows the history of file changes, including Git commits and local saves.
  • Folders View: Some people refer to this as the File Explorer, which is an apt descption as this is showns all of your project's files. Manage files and folders in your project. Drag and drop files, create new ones, or open them in the integrated terminal.

Profiles and Extensions

  • Profiles: Save and switch between different configurations, including extensions, settings, and layouts. Create profiles via the command palette.
  • Extensions: Enhance functionality by installing extensions from the marketplace. Manage them through the Extensions view in the Activity Bar.

VS Code's UI is designed to be flexible and adaptable, allowing developers to tailor it to their specific needs and workflows. Whether you're working on a single file or managing a large project, the interface provides tools to optimize your productivity.

General

  • Lines
  • Disable Hover Comments
  • How VS Code Handles File Changes (Exclusive File Locking / External Editing)
    • VS Code does not lock files in the traditional sense, but it does have mechanisms to handle concurrent editing and protect your work.
    • Auto-save and dirty state tracking: VS Code tracks whether a file has unsaved changes (shown by a dot on the tab). You can enable auto-save through settings, which automatically saves your work at intervals or when you switch files.
    • Conflict detection: If a file is modified outside of VS Code while you have it open, VS Code will detect the change and notify you. You'll see a prompt asking whether to reload the file from disk or keep your version. This prevents accidental overwrites.
    • No exclusive file locking: VS Code doesn't prevent other applications from opening, editing, or modifying the same file simultaneously. This is by design—it follows the Unix philosophy of allowing flexible, concurrent file access rather than enforcing locks.
  • Saving Changes
    • Q: When i close a windows it remembers the code even thought I have not saved it. How can I close a windows and not save the changes?
    • A: I had `Auto Save` on. it is now set back to default so if you close a tab with unsaved changes you will be prompted, but if you close the whole app unsaved changes will be remembered. The default option gives you the best of both worlds.
    • ide - How can I get VS Code to not remember unsaved changes when I exit it? - Stack Overflow
      • Q:
        • VS Code seems to maintain it's own record of working changes on a file. (See the "dot" next to the filename in the image, which indicates unsaved changes.)
        • I want it to completely forget these changes and load the file from disk
        • Closing and re-opening the file and/or entire project doesn't do it. Where is the button or what is the command to just discard changes?
      • A:
        • This feature where VS Code remembers unsaved changes when you close the workspace is called "Hot Exit". You can find docs about it here: https://code.visualstudio.com/docs/editor/codebasics#_hot-exit.
        • If you want VS Code to not keep track of your unsaved changes, then put "files.hotExit": "off" in your settings.json file. That will cause it to prompt you on whether you want to save unsaved files before exiting, at which point you can select the "Don't Save" option.
        • If you've already opened a file where it recalled the unsaved changes it remembered, just close that editor tab, and select the "Don't Save" option in the prompt that appears about unsaved changes. Then reopen that file.
    • How to Prevent VSCode from Losing Unsaved Tabs Across Multiple Windows - DEV Community
    • How to toggle Auto Save in VS Code - KindaCode
  • File Revert
    • VS Code tips - The Revert File command - YouTube | Code 2020
      • The revert file command reverts a file back to it's last saved state. This is how the file appears on disk as well.
      • It can be a useful alternative to undoing and redoing.
      • Works independently of source control.
      • Reads the file in from disk again. (i.e. reloads the file)
  • Show Hidden Characters
    • Once you have enabled `Render Whitespace`, you will be able to see the following characters in your code:
      • Spaces
      • Tabs
      • Newlines
      • Trailing whitespace
      • Non-breaking spaces
      • Unicode characters  (not sure about this one)
    • Setting that is toggled 
      Editor: Render Whitespace
    • Solutions
      • VSCode Menu
        • View --> Appearance --> Render Whitespace 
        • It changes `Editor: Render Whitespace` between `none` and `all`
      • keyboard shortcut `View: Toggle Render Whitespace` 
        • by default does not have a keybound to it.
        • Add a key combination and create a shortcut.
      • Extension Shortcut Menu Bar 
        • Enable `Shortcut Menu Bar: Toggle Render Whitespace` will give you a button on the bar for toggling.
          or run this command from the `Comand Palette`
        • It changes `Editor: Render Whitespace` between `none` and `all`
    • Links
  • Styling
  • Misc

View Containers

Explorer

These issues and solutions pertain to the Explorer and it's Views and their features. Search has its own section because it spans more than it's View.

  • Pressing F3 in any of the Views will open a Search Menu which as the ability to search or filter that Views's child data as required.
  • The Explorer holds the Views.
  • The File Explorer is actually the Folders View.
  • Soem people refer to the Folders View as the Explorer.
Folders (View) (a.k.a. File Explorer)
  • Expand / Collapse
  • Exclude Files and Folders from the Explorer (files.exclude)
    • Settings --> Text Editor --> Files --> Exclude 
      "files.exclude": {
    "**/.git": true,
    "**/.svn": true,
    "**/.hg": true,
    "**/.DS_Store": true,
    "**/Thumbs.db": true
},
      • The File Explorer decides which files and folders to show or hide based on this setting.
      • In settings Type: files.exclude
      • URL Shortcut: vscode://settings/files.exclude
      • These settings use Glob Patterns to match files, folders and paths. This uses VSCode's Mini Glob library.
    • Settings --> Features --> Explorer --> Exclude Git Ignore 
      "explorer.excludeGitIgnore": false
      • Controls whether entries in .gitignore should be parsed and excluded from the Explorer. Similar to `files.exclude`.
      • In settings Type: git.ignore
    • Notes
      • VS Code: Hide specific Files/Folders from the Left Sidebar | bobbyhadz - A step-by-step guide on how to hide specific files or folders from the left sidebar (explorer) in Visual Studio Code.
      • when editing the settings.json, false just turns the rule off, it does not apply negation.
      • In the settings GUI, you do not have the option to enable a disabled rule. Disable rules do not appear in the GUI not appear (this is probably a bug).
      • When you use the Show/Hide button on the explorer view, this toggles false/true for the files.exclude settings in the settings.json.
      • Current there is not a way to negate a rule, i.e. override for a subfolder within a parent that has been hidden.
  • Exclude all files but (files.exclude)
    • glob might only be implemented on files, not folders, did I write this somewhere? 
      {
  "files.exclude": {
    "src/setup/upgrade": true,
    "src/setup/upgrade/!(3_1_4)": true,     - doesnt work
    "!src/setup/upgrade/3_1_4/**": true,    - doesnt work
    "src/setup/upgrade/[!3_1_4]": true,     - doesnt work
    "src/setup/upgrade/![3_1_4]": true,     - doesnt work
  },
}
    • Exclude all files except for... · Issue #869 · microsoft/vscode · GitHub
      • Using negated glob patterns with "!" is currently not supported.
    • VS Code files.exclude [!except] Generator
      • Generate VS Code config to exclude a directory (e.g. node_modules) with the exception of specified subpaths.
      • This generates using a workaround where you can negate individual characters, not full file or directory names.
    • Duck.ai
      • The issue is that negation patterns with false don't work in files.exclude the way you might expect. VS Code's files.exclude doesn't support re-including nested paths once a parent is excluded.
      • However, there's a workaround: use files.watcherExclude for the exclusion instead, or restructure your approach.
        • I do not think this will have the effect of excluding files as needed, just stops them getting processed and still has the same glob limitations anyway.
        • files.watcherExclude is a settings entry that tells the file‑system watcher which paths to ignore.
        • When a file or folder is excluded, VS Code does not monitor it for changes, which reduces CPU usage and avoids noisy change events (e.g., for large node_modules trees or generated files).
        • Example 
          {
  "files.watcherExclude": {
    "**/node_modules/**": true,
    "**/.git/**": true,
    "**/dist/**": true,
    "**/*.log": true
  }
}
      • Unfortunately, some versions of VS Code have limitations with negation in files.exclude. In that case, your best option is to exclude specific subdirectories instead of the parent:
      • This explicitly excludes all version before 3_1_4, which will then be visible by default. 
        "files.exclude": {
  "src/setup/upgrade/3_0_0": true,
  "src/setup/upgrade/3_0_1": true,
  "src/setup/upgrade/3_1_0": true,
  "src/setup/upgrade/3_1_1": true,
  "src/setup/upgrade/3_1_2": true,
  "src/setup/upgrade/3_1_3": true,
  "src/setup/upgrade/3_1_4": false
  // ... other exclusions
}
      • "src/setup/upgrade/3_1_4": false I included line for easier reading. You can leave this line in or remove it, is not needed.
Timeline (View) (File and Git History)

The Timeline displays a chronological list of changes for the selected file. It integrates with Git (if available) to show commit messages, authors, and timestamps alongside local save points.

  • Tutorials
  • See a file's change history (Timeline)
    • Instructions
      1. Select the relevant file in `EXPLORER`
      2. In `EXPLORER`, exapand the `TIMELINE` panel
      3. Both `Git History` and `Local History` are show but you can filter as required
  • How to compare current file with a previously saved version
    • Have the correct file open that you want to compare
    • In the panels on the left select the TIMELINE panel.
      • This will show you a history of the file.
    • Scroll down to any entry
    • Right click on it and select Compare with File
    • The file will now be displayed in a Diff layout.
      • The current file is on the right.
      • You can only copy code from the old one to the new one.
  • Restoring Previous Versions of a file
    • Right-click on a specific entry in the Timeline.
    • Select Restore Contents to revert the file to that version.
  • Colored pixels in the Scrollbar (might appear in the minimap)
    • Colored pixels in scrollbar in VS Code - Stack Overflow
      • I believe this is called the "overview ruler".
      • These decorators indeed indicate changes in your source.
        • Green marks code added
        • Red marks code removed.
        • Small dots must mean just empty lines I am guessing
      • You can disable this in your settings under the key scm.diffDecorations (possible value: all, gutter, overview, none.)
    • Scroll bar map mode and bar mode - Visual Studio (Windows) | Microsoft Learn
      • Learn how to track changes in your code through the customization of the scroll bar and also learn how to use Bar mode and Map mode.
      • This article is for Visual studio IDE but gives a table explianing different colours.
  • Troubleshooting
    • visual studio code - Timeline not showing timeline of current opened file - Stack Overflow
      • Q:
        • I have a new Windows installation, and the Timeline feature doesn't seem to be working properly. Clicking the TIMELINE window does not show the git log.
        • I had to click the Refresh button. It then showed the git log for one particular file. When I changed the opened file in the editor, the TIMELINE window contents did not change. Clicking the Refresh button flashed the TIMELINE window, but it still showed the log for that same one file.
        • Are there additional Timeline settings needed to make it work?
      • A:
        •  It sounds like you pinned a file in the timeline. If you did, just click the pin button in the action bar of the timeline again.
Outline (View)
  • Automatically position the outline based on cursor position. 
    • Click on OUTLINE
    • Click on on OUTLINE's 3 balls menu
    • Select `Follow Cursor`
  • Start Outline with collapse items 
    "outline.collapseItems": "alwaysCollapse"
    • Outline: Collapse Items
    • Controls whether Outline items are collapsed or expanded.
    • If you have outline set to always start collapsed, the result is very user friendly as you navigate to the functions, methods or varaible without the rest of the tree being expanded
  • Outline's "Follow Cursor" option is missing from Settings · Issue #173935 · microsoft/vscode · GitHub
    • jrieken
      • That's actually on purpose. The "Follow Cursor" is a UX state property however it is persisted and part of settings sync, meaning it should feel like a setting minus the configurable out-of-the-box default
    • LeCalicot
      • One of the main usage of the outline is to be a "geographical map" of the file to be able to navigate and find the direction. For very long files, it is very useful to jump to another part of the file without having to scroll all the way through. Similarly to a geographical map, one need a "you are here" marker otherwise the map is useless. Here the "follow cursor" is the "you are here" marker.
      • It helps to make a mental map of the file (e.g.: class A is between class E and H) and remembering how a section of the code is associated to the outline. Otherwise the outline is totally decorralated from the code and it becomes hard to answer questions like "should I go up or down to find class E).
      • PS: one could argue that the minimap fills this usecase, but I have understood how anyone can read anything with with such tiny characters)
    • gmccullo
      • I have to turn on follow every time I restart vscode. The rationale for not making this choice pesistent / configurable is idiosyncratic.
      • NB: I am not sure this is an issue anymore.
  • OUTLINE - Additional Collapse and Expand buttons · Issue #273412 · microsoft/vscode · GitHub
Open Editors (View)
  • Better Open Editors
    • Groups open editors by package folders or RegEx patterns.
    • This is a replacement for the Open Editors panel, which becomes very cluttered with many open files. Especially in projects with package folders (e.g. in monorepos) you often have many files with the same name open and have difficulties to distinguish them.
  • Open Editors Tree View
    • Display open editors as a file tree with drag and drop support, similar to the regular file explorer.
  • Open Editors Hierarchy
    • Shows currently open editors (tabs) organized by folder hierarchy in the Explorer sidebar.
    • Perfect for managing many open files with enhanced navigation and organization features.
  • Nested Open Editors
    • Display open editors as a file tree with drag and drop support, similar to the regular file explorer.

Terminal 

  • Moving/Detaching the Terminal (Floating Window or Tab)
    • Move the Terminal into its own standalone window 
      > Move Terminal into New Window
    • Move the Terminal into its own tab 
      > Move Terminal into Editor Area
  • Open Multiple Terminals in VSCode for to allow for Multiple Instances of Your Python Server - YouTube
    • This is AI generated and has some errors but the theory is useful.
    • The command to open multiple Terminals is actually: Ctrl + Shift + '
    • Discover how to easily open multiple terminals in Visual Studio Code (VSCode) to run multiple instances of your Python applications. Perfect for when you need to run a server and a client from the same workspace.

Problems

Source Control

  • Source Control panel is missing
    • VS Code's Source Control icon has gone missing, how do I get it back? - Stack Overflow
    • Different Methods
      1. You can show the "Source Control" panel with a keyboard shortcut:
        • Ctrl + Shift + G
        • Once it's displayed, from there you can drag it to your menu bar.
      2. Open the Command Palette:
        • Ctrl + Shift + P
        • Then write "source control", then add it.
      3. It is an icon on the left hand side, looks like a USB:
        • Right click on it and select
        • `Move To ` --> `Panel`

Search 

  • A lot of the functionality here is shared with the Search Editor.

The search feature in VSCode is very powerful but it does have it's limits.

You can control what files and folders are included in a searches using the VSCode mini Glob library.

VSCode can perfom searches using either:

  1. Search Panel (always attached to your main editor window)
  2. Search Editor (Standalone in either a tab or a window)
Settings
  • Exclude Files and Folders from the Search
    • Settings --> Features --> Search --> Exclude 
      "search.exclude": {
    "**/node_modules": true,
    "**/bower_components": true,
    "**/*.code-search": true
},
      • Excluding files and folders in fulltext searches and file search in quick open.
      • Inherits all glob patterns from the `files.exclude` setting.
      • In settings Type: search.exclude
      • URL Shortcut: vscode://settings/search.exclude
      • These settings use Glob Patterns to match files, folders and paths. This uses VSCode's Mini Glob library.
    • Settings --> Features --> Search --> Use Global Ignore Files 
      "search.useIgnoreFiles": true
      • Controls whether to use `.gitignore` and `.ignore` files when searching for files.
      • The default option of enabled means that from the start VSCode will not search in files specified in your .gitignore which is great.
  • Show line numbers in search results
    "search.showLineNumbers": true
    • Search: Show Line Numbers
    • Controls whether to show line numbers for search results
  • Collapse State of search results (Default) 
    "search.collapseResults": alwaysExpand
    • Search: Collapse Results
    • Controls whether the search results will be collapsed or expanded.
    • I leave mine on auto expand.
  • View mode of search results (Default) 
    "search.defaultViewMode": tree
    • Search: Default View mode
    • Controls the default search result view
    • Tree is great for context
  • You have to press Up Arrow to get historical search terms, swap this for the Down Arrow
    • doing this will make this the same as the windows run menu.
    • In Visual Studio Code, when you’re using the in-page search (Ctrl+F or Cmd+F) or the search panel, you can navigate through your previous search terms in either direction.
    • Description of commands
      • history.showPrevious: moves backward in search history
      • history.showNext: moves forward in search history
    • To change the arrow direction
      • By default this will alter the user level settings, not the workspace. 
      • Method 1 - Keyboard shortcuts Editor
        • Open the Keyboard shortcuts Editor (pick an option)
          1. File --> Preferences --> Keyboard Shortcuts
          2. Ctrl+K, then Ctrl+S  (I keep the Ctrl button held down)
          3. > Preferences: Open Keyboard Shortcuts
        • Search for history.showPrevious
          • Click on the line only showing UpArrow, ignoring the line with Alt + UpArrow (this is a legacy setting which you can change if you want)
          • When prompted, press the Down Arrow on your keyboard and then ENTER
        • Search for history.showNext
          • Click on the line only showing DownArrow, ignoring the line with Alt + DownArrow (this is a legacy setting which you can change if you want)
          • When prompted, press the Up Arrow on your keyboard and then ENTER
      • Method 2 - Edit Keybindings.json
        • Open Command Palette (Ctrl+Shift+P / Cmd+Shift+P).
        • Search for "Preferences: Open Keyboard Shortcuts".
        • Add the following 
          {
    "key": "down",
    "command": "history.showPrevious",
    "when": "historyNavigationBackwardsEnabled && historyNavigationWidgetFocus && !isComposing && !suggestWidgetVisible"
},
{
    "key": "up",
    "command": "-history.showPrevious",
    "when": "historyNavigationBackwardsEnabled && historyNavigationWidgetFocus && !isComposing && !suggestWidgetVisible"
},
{
    "key": "up",
    "command": "history.showNext",
    "when": "historyNavigationForwardsEnabled && historyNavigationWidgetFocus && !isComposing && !suggestWidgetVisible"
},
{
    "key": "down",
    "command": "-history.showNext",
    "when": "historyNavigationForwardsEnabled && historyNavigationWidgetFocus && !isComposing && !suggestWidgetVisible"
}
          • There is one rule to disable the default rule and then one to add the new rule for each arrow key.
          • Pay attentions to the comma on the last record, there isn't one.
General
  • Tutorials
  • Search Editor (A standalone search instance in window or tab)
    • This is not the Search Panel.
    • You can open a new Search Editor with the Search Editor: Open New Search Editor command, or using the Open New Search Editor button at the top of the Search view. Alternatively, you can copy your existing results from a Search view over to a Search Editor with the Open in Editor link added to the top of the results tree, or the Search Editor: Open Results in Editor command.
    • vscode-docs/release-notes/v1_43.md at vnext · microsoft/vscode-docs · GitHub - After a few iterations stabilizing on Insiders, we are shipping Search Editors, which let you view workspace search results in a full-sized editor, complete with syntax highlighting and optional lines of surrounding context.
    • Underrated VSCode feature: Search Editor - Lucas Arantes
  • Regex Searching
  • Search in a Specific Folder
    • Manually add file path
      • Open the search panle
      • click on the 3 dots to ex[and the advanced options
      • manually add your required path to `Find in Folder`, eg: 
        ./src/components/core                   - Recursively search all files starting in ./src/components/core/
./src/components/core/**/*.php          - Recursively search all files starting in ./src/components/core/ and they must be PHP files
    • `Find in Folder` Context Menu
      • In the Explorer panel, right click on the folder, select `Find in Folder`.
      • This automatically fills in the path into the search field `files to include`but be warned, it does replace what is there.
      • Some examples 
        ./src/components/core
./src/components/core/**/*.php
  • Search only subfolders
    • To search only the subfolders within /components/_includes/ while ignoring any files sitting directly inside that folder, you need to use a specific glob pattern in the files to include field. 
      ./components//*/**/*
src/upgrade/**
  • Glob Patterns
    • Docs
      • Glob Patterns Reference - Visual Studio Code glob patterns reference
        • In the Search view, the ** prefix is assumed. The glob patterns in these settings are always evaluated relative to the path of the workspace folder.
      • vscode/src/vs/base/common/glob.ts at main · microsoft/vscode · GitHub - The mini Glob library VSCode uses.
      • ./ cause the pattern to be treat as absolute and apply this path from the root, otherwise the pattern is always treated as relative.
      • src/ is the same as **/src as they both will match any part of the path.
    • Patter Testers
    • What is supported
      • VS Code’s search include/exclude patterns do not support Bash-style brace expansion {a,b,c}.
      • The mini glob library of VSCode soes not fully support brackets for folders, it does for files.
      • It only supports glob patterns following the minimatch syntax, e.g.: 
        * → any characters in a file/folder name

** → recurse through subfolders

? → single character

[...] → character set
      • Not Valid 
        ./src/setup/upgrade{/3_1_0/,/3_1_1/,/3_1_2/,/3_1_3/}
      • Valid 
        ./src/setup/upgrade/3_1_?/**
./src/setup/upgrade/3_1_*/**

./src/setup/upgrade/3_1_0
./src/setup/upgrade/3_1_1
./src/setup/upgrade/3_1_2
./src/setup/upgrade/3_1_3

./src/setup/upgrade/3_1_0/**, ./src/setup/upgrade/3_1_1/**, ./src/setup/upgrade/3_1_2/**, ./src/setup/upgrade/3_1_3/**
Troubleshooting
  • Enabling/disabling Show Excluded Files in the explorer view, changes what appears in the search pane, unless you toggle Use Exclude Settings and Ignore files in the search panel.
  • If after you added or edited a glob pattern and a result does not dissapear from the search immediately as expected, or not at all, try restarting VSCode.
  • In the search panel, the files to include will override files.exclude set in you workspace or user settings.
  • search.exclude is being ignored · Issue #86727 · microsoft/vscode · GitHub
    • You have explicitly disabled the exclude do the following:
        • Toggle the search details to expand them (if needed)
        • Click on Exclude Settings and Ignore Files.
  • Show full lines in search results
  • vscode search panel `files to include` is not working
    • Example 
      Good: src/libraries/vendor
Good: **/src/libraries/vendor
Bad:  ./src/libraries/vendor
    • files to include and files to exclude might be handling ./ differently.
    • In VS Code's files.exclude logic, patterns are generally relative to the workspace root by default. When you add ./, the engine sometimes fails to parse it correctly because it's looking for a literal folder named rather than treating it as "the current directory."
    • Strict Path Matching: VS Code treats the keys in files.exclude as simple glob patterns. While ./ means "here" in a terminal, in a glob string, it can be interpreted as a literal character match.
    • Leading Slashes: Similarly, starting with a forward slash /src/... can sometimes cause issues depending on whether you are in a multi-root workspace or a single folder.
    • When you add ./src/libraries/vendor in the files to exclude in the search panel, it handles these fine. there must be a difference in how these and files.exlude are parsed.

Tabs

Windows

Multiple Explorer/Panel Instances (eg: Multiple Explorers) / Detaching

Having multiple Explorer is a common question. Remeber the Explorer holds multiple views.

There is the Panel (by default at the bottom), Primary Side Bar and Secondary Side Bar areas where you can put the explorer, but these are only ever available on the Primary Editor Window and there is only ever 1 Explorer panel per VSCode instance.

  • How can I have the explorer tab on more than one window?
    • You cannot currently have the same Explorer view (with synced folder structure, open files, etc.) visible in multiple editor windows within the same VSCode instance.
    • There is only one explorer panel and it is only ever present on the primary editor windows.
    • The explorer panel cannot be detached, made into a floating window or moved to a tab.
    • There are some workarounds with their own nuances. You can open the same folder in multiple instances of VSCode, each with its own Explorer panel showing the same files.
      1. Open the same folder in a new window
        • Each window has its own independant Explorer tab showing the same directory tree.
        • They won’t stay synced (like which file is selected), but you can edit the same files independently.
      2. Duplicate As Workspace in New Window (command)
        • Opens a copy of your current workspace (same folders, layout, and settings) in a new window.
        • Make sure you close this duplicate workspace first to prevent overwriting your real workspace's settings
      3. Use an Extension
        • There are none currently available.
  • Moving/Detaching the Panel and Explorer
  • Links
Workaround: Open the same folder in a new window
  • Each window has its own independant Explorer tab showing the same directory tree.
  • They won’t stay synced (like which file is selected), but you can edit the same files independently.
  • What it does:
    • Opens a completely empty new VS Code window.
    • This does not share VSCode settings but will honour those in the workspaces settings.json
    • It’s a “fresh instance” — no folder, no workspace settings, no context.
    • You can then manually open any folder or workspace inside it.
    • This gives you another explorer, outline, timeline.
    • It behaves like another instance of the program.
    • It does not share settings from the first workspace.
    • It does not use the same setting from the first workspace (not sure why if all of the settings files are there).
    • It will use any settings it finds in /.vscode/settings.json
  • Use it when:
    • You just want a blank slate.
    • You want to open a totally different folder/project.
    • You don’t need to preserve settings, extensions, or UI layout from the current window.
  • How To
    • Go to File → New Window.
    • Then go to File → Open Folder
    • Open the same folder as the first window.
  • Links
Workaround: Duplicate As Workspace in New Window
  • Opens a virtual copy of your current workspace (same folders, layout, and settings) in a new window.
  • You can then navigate to different subfolders or files independently while keeping the same context.
  • When you quit out of VSCode close the duplicate workspace first to prevent overriding settings in your primary instance.
  • What it does:
    • Opens a virtual copy of your current workspace (same folders, layout, and settings) in a new window.
    • This is particularly useful when:
      • You have a multi-root workspace.
      • You want to work on the same project in two windows simultaneously.
      • You want to see different files or Explorer views side by side, while keeping the same workspace configuration.
    • Duplicating a workspace in Visual Studio Code allows you to open the same project in multiple windows, enabling parallel workflows. This is particularly useful for working on different files or branches simultaneously.
    • Duplicating a workspace does not create a new physical copy of your project; it simply opens another instance of the same workspace.
    • This allows you to have two separate VSCode windows open that point to the same workspace.
  • It’s smarter than just reopening the folder — because it also copies:
    • The workspace configuration (.code-workspace file if one exists)
    • Folder list (for multi-root)
    • Settings specific to that workspace
    • Open editors (depending on your settings)
  • How To
    • File --> Duplicate Workspace
      or
    • Run the command: Workspaces: Duplicate As Workspace in New Window
  • Links
    • Running Multiple VSCode Windows from the Same Workspace – Ryan Chapin's Website
      • In order to have two separate VSCode windows open that point to the same workspace, press CTRL+Shift+P and then search for Duplicate As Workspace in New Window. This will open a new window that is associated with the current workspace.
      • The thing to keep in mind is that it just DUPLICATED the existing workspace in a new window. Notice that at the top of the EXPLORER it will say UNTITLED (WORKSPACE). You can now work with two windows editing your code, but when you quit out of VSCode close the duplicate workspace first. It will ask you to save the workspace. You can tell it to close without saving.
      • When you close the duplicated workspace, don't save it otherwise you will override your normal projects settings. These settings include window layout not just those in settings.json
    • VSCode duplicate workspace in new window - YouTube - How to open duplicate workspace in VSCode?
Workaround: Worked Example

Say you’re working on my-project and you want to edit backend and frontend files side by side in two windows.

  • If you use File → New Window, you’ll need to open the same folder again manually.
  • If you use Workspaces: Duplicate As Workspace in New Window, VS Code instantly opens a clone of your current setup, same folders, extensions, and environment,  but in a new window.
    • You can then navigate to different subfolders or files independently while keeping the same context.

If your goal is “have Explorer tabs for the same project in multiple windows”, then Workspaces: Duplicate As Workspace in New Window is the better and more efficient way to do it. 

 

 

Diff Editor (Diff / Compare / Merge)

  • Tutorials
    • How to do a Diff in VS Code (Compare Files) - VS Code has a very powerful diff tool. This quick post is going to teach you how to perform diffs (compare files) in VS Code.
    • VS Code: How to Compare Two Files (Find the Difference) - KindaCode - This concise and straightforward article shows you a couple of different ways to compare two files using VS Code (Visual Studio Code).
    • 3 way merge editor | Visual Studio Code
      • In this release, June 2022 (version 1.69), we continued working on the 3-way merge editor.
      • This feature can be enabled by setting git.mergeEditor to true and will be enabled by default in future releases.
      • The merge editor allows you to quickly resolve Git merge conflicts. When enabled, the merge editor can be opened by clicking on a conflicting file in the Source Control view.
  • Swap Diff Direction
    • Q: I use VSCode as my default tool to compare files (git changes and others) and I sometimes I need to see the differences in the other way than I have them opened in the viewer. Hoqw can I do this?
    • A:
      • You can use Compare: Swap Left and Right Editor Side in the command palette.
      • If you want to bind it to a keyboard shortcut, the command's ID is workbench.action.compareEditor.swapSides. See also the isInDiffEditor context key.
      • There is no in-built button for this but you can add one using an extension.
        • swapdiff - Visual Studio Marketplace - Quickly swap diff direction for documents open in diff mode
          • When you swap directions with this plugin, the arrows allowing you to copy from one side to the other will dissapear.
          • The arrows are present only for left (old) to right (new) and if you use the left/right swap plugin, the arrows will disappaer and that is why you cannot fine them
    • Allow merging from right to left with diff arrows view · Issue #153620 · microsoft/vscode · GitHub
  • FAQ
    • Q: When using the diff editor (in default state) to compare changes to a file in version control you cannot copy Right to Left, why not?
    • A: You're not comparing two files, you're comparing the current state to a previous state. The previous state (last commit) is locked in, so you can't swap in order to copy changes from current state to previous state.

Sticky Scroll

When I scroll in HTML (and other langauges) there is a bar at the top that shows how deep i am, what is this? = Sticky Scroll

Sticky Scroll in Visual Studio Code is a feature that keeps important lines—like function or class declarations—pinned at the top of the editor while you scroll, helping you maintain context in large files. It’s especially useful for navigating deeply nested code without losing track of the current scope.

  • Tutorials
  • Settings
    • Editor > Sticky Scroll: Default model
      "editor.stickyScroll.defaultModel": "outlineModel"
      • Defines the model to use for determining which lines to stick. If the outline model does not exist, it will fall back on the folding provider model which falls back on the indentation model. This order is respected in all three cases.
      • Default = outlineModel
    • Editor > Sticky Scroll: Enabled 
      "editor.stickyScroll.enabled": true
      • Shows the nested current scopes during the scroll at the top of the editor.
    • Editor > Sticky Scroll: Max Line count 
      "editor.stickyScroll.maxLineCount": 5
      • Defines the maximum number of sticky lines to show.
      • Default = 5
  • Different Models (my explanation)
    • outlineModel
      • Class --> Methods
      • This is the default option and works the best.
    • foldingProviderModel
      • Class --> Methods --> Brackets
      • This can be a bit flaky with badly formatted code. It does not always show the function, gets comment lines mixed up and then bracket parsing can be hit and miss.
    • indentationModel
      • Works simply by using the indetation level. HTMl is a good example or when to use this.

Commands

Keyboard Shortcuts / Bindings

  • Ctrl key (Windows/PC) = Command key (macOS/Mac)

The Keys / The doing Stuff

  • Command Palette (open)
    • F1
    • Ctrl + Shift +P
    • In the search box at the top, type >
    • View --> Command Palette
    • How to Open the Command Palette in VS Code | Alphr
      • If you’re using VS Code, how to open the command palette is one of the first things to know. You’ll learn about how to open in on three platforms.
      • There is a list of keyboard shortcuts at the bottom.
  • Enable Filtering or Searching in a Panel or View
    • Click in either a Panel or a View
    • Then press of the following:
      • F3
      • Ctrl+Alt+F
    • This will open a Search/Filter popup which has the ability to search or filter that Panel's/View's child data as required.
  • Execute your code
    • F5 or use the `Run` button.
  • Refactoring
  • Online
    • When on any GitHub repo, if you press the period "." then it will change the page to an online VSCode editor.
  • Open Developer Mode (Ctrl + Shift + I) does not work, Co-Pilot opens instead
    • Toggle Developer Tools doesn't work any more · Issue #84340 · microsoft/vscode · GitHub
      • This is expected behaviour because this keyboard shortcut has been reassigend by Microsoft.
      • It looks like the keyboard shorctut (ctlr+shift+I) only toggles the Dev Tools when VSCode is in development mode.
      • You can add your own keyboard shortcut/binding, change or disable the current one.
      • Just use the menu shortcut.
    • Developer Mode
      • Visual Studio Code is built with Electron, which is simply put a wrapper or container for creating desktop applications built with HTML and Javascript.
      • Help --> Toggle Developer Tools
        • When you select this, the Edge DevTools window should open.
  • Focus Editor Group
    • Ctrl + 1 = Select the primary editor group
    • Ctrl + 2 = Select the secondary editor group
    • Ctrl + 3 = Select the tertiary editor group
    • If the selected editor group does not exist, a new editor group is created within the currently selected Editor Window.
  • Focus Terminal
    • Ctrl + ' = Terminal
  • Zoom
    • How to Zoom in and out in Visual Studio Code | bobbyhadz - A step-by-step guide on how to zoom in and out, reset the zoom level and enable mouse wheel zoom in VS Code.
      • Zoom In: Ctrl + = ( or Cmd + = on macOS)
      • Zoom Out: Ctrl + - ( or Cmd + - on macOS)
      • Reset: Ctrl + Numpad0 (or Cmd + Numpad0 on macOS)
    • I recommend at least - 1 zoom level
    • Accessibility | Visual Studio Code - Visual Studio Code user accessibility features. Learn here about the various ways VS Code aids user accessibility.
      • View > Appearance > Zoom In (Ctrl+=) - increase the zoom level.
      • View > Appearance > Zoom Out (Ctrl+-) - decrease the zoom level.
      • View > Appearance > Reset Zoom (Ctrl+Numpad0) - reset the zoom level to 0.
  • Split Editor
    • This splits the editor windows into panes by adding another window group but will also open up the same file in this new group.
    • Useful for working on different parts of the file at the same time.
  • Jump between Opening and Closing brackets

Tutorials

  • Course: Master VSCode
    • Master VSCode is an interactive course to learn keyboard shortcuts and level up your productivity. It consists of 20 lessons that are carefully separated by topic and importance.
    • Visual Studio Code has quickly become one of the most popular IDEs, if not the most popular. Its flexibility enables work with any kind of code base and project. Unfortunately, it is easy to get stuck with inefficient workflows when you are missing some important commands. This interactive course will help you explore and master VSCode's keyboard shortcuts.
  • DON'T Use the File Explorer in VS Code! - YouTube | James Q Quick

CheatSheets

Settings

  • Default settings
    • Default settings reference | Visual Studio Code - Reference of default settings in Visual Studio Code.
    • User and workspace settings | Visual Studio Code - How to modify Visual Studio Code User and Workspace Settings.
    • Default tab size is 4 spaces.
    • Access them by the command palette
    • You can also view the default values in the Settings editor or see a read-only version of the defaultSettings.json via the Preferences: Open Default Settings (JSON) command in the Command Palette (Ctrl+Shift+P).
    • Stored in defaultSetttings.json
    • Extensions can add their own settings into this file.

Managing

  • Find All Modified Settings in Visual Studio Code (All settings that have been changed from default)
    • To find all modified settings in Visual Studio Code, you can use the following steps:
      1. Open the Settings/Preferences or A setting page.
      2. In the "Search Settings" field, type @modified.
      3. This will filter the settings to show only those that have been changed from their defaults.
    • This method makes it easier to see or undo any changes that had an undesired effect. It's a quick way to manage your settings and ensure they are up to date.
  • Reset all settings back to their default values
    • Open your User settings.json and delete everything except for 2 curly braces (e.g. {})
    • NB: The open settings.json icon is now a cog.
    • How to Change All VS Code Settings Back to Default - YouTube | Techie Dialogue
      • If you’ve customized your VS Code settings but now want to reset them, you can easily revert everything back to the default settings.
      • This can help if you want to start fresh, troubleshoot issues, or simply prefer the original setup.
      • In this video, we’ll show you how to change all VS Code settings back to default, ensuring a clean and consistent experience.
    • How to Reset Visual Studio Code to Default Settings (2024) | Reset VSCode - YouTube | The Code City
      • If you're struggling to reset Visual Studio Code back to its default settings, this quick and easy guide has you covered!
      • In this video, I’ll show you how to reset VSCode (2024 version) to its factory settings in just *2 minutes*! Whether you’ve tweaked your settings.json file or installed too many extensions.
      • Resetting your settings can help you start fresh and solve configuration issues.

General

As I find useful settings I will add them here. Not everything is available in the GUI.

  • The VSCode User settings file is located 
    c:\Users\<yourusername>\AppData\Roaming\Code\User\settings.json
    • Settings will not appear in this file if they are default.
  • VSCode will create the settings.json and recommendations.json when they are needed (i.e. there are settings that need to go in them).
  • User and workspace settings | Visual Studio Code - How to modify Visual Studio Code User and Workspace Settings.
    • You can configure Visual Studio Code to your liking through its various settings. Nearly every part of VS Code's editor, user interface, and functional behavior has options you can modify.
    • VS Code provides different scopes for settings:
      • User settings - Settings that apply globally to any instance of VS Code you open.
      • Workspace settings - Settings stored inside your workspace and only apply when the workspace is opened.
    • VS Code stores setting values in a settings JSON file. You can change settings values either by editing the settings JSON file or by using the Settings editor, which provides a graphical interface to manage settings.
    • User settings
      • User settings are your personal settings for customizing VS Code. These settings apply globally to any instance of VS Code you open. For example, if you set the editor font size to 14 in your user settings, it will be 14 in all instances of VS Code on your computer.
    • Workspace settings
      • VS Code stores workspace settings at the root of the project in a .vscode folder. This makes it easy to share settings with others in a version-controlled (for example, Git) project.
      • Not all user settings are available as workspace settings. For example, application-wide settings related to updates and security can not be overridden by Workspace settings.
    • Settings file locations
    • Settings precedence
  • What is the .vscode folder and should you Commit it to Git | bobbyhadz
    • The .vscode folder is used to store project-specific settings, debug configuration, shared tasks and build commands.
    • In other words, the .vscode folder is used to store workspace-specific settings.
    • Workspace settings are specific to a project and can be shared with other developers on your team.
    • The settings and configuration in your .vscode folder override the global user settings.
    • Should you commit your .vscode directory to source control
      • Depends on whether you share configuration and settings with other team member.
  • How to open settings.json in VS Code [6 Ways] | bobbyhadz - A step-by-step illustrated guide showing different ways of how to open settings.json in VS Code in 6 different ways.
  • Customize your editor · Visual Studio Code - The Essentials - One of the strengths of VS Code is its ability to be customized and fully adapted to your needs. Thus, you can change the appearance of the editor, add extensions, change or create your own keyboard shortcuts, and much more.
  • Understanding settings.json in Visual Studio Code - Ivan Lim Web & Database Services - Learn how to use the settings.json file in Visual Studio Code to customize your coding environment. Our guide provides detailed instructions and examples to help you get started. Visit our website to learn more!
  • Locating and Modifying VSCode settings.json | GeeksforGeeks - In this article, we will learn about the VSCode settings.json file and customize it for our specific needs.

Git

Git Blame
  • VSCode includes built-in Git Blame support and should be enabled by default.  should this be here or in documentation
  • Settings
    • Git › Blame › Status Bar Item: Enabled 
      "git.blame.statusBarItem.enabled": true
      • Controls whether to show blame information in the status bar.
    • Git › Blame › Status Bar Item: Template 
      "git.blame.statusBarItem.template": "${authorName} (${authorDateAgo})"
      • Template for the blame information status bar item. Supported variables:
  • How to use
    • Find the blame information in the status bar:
      • Look in the status bar for an icon (a circle intersected with a vertical line), next to a name and date (which should match the default blame template above).
      • It is probably in the right handside group.
    • Click on a line you are interested in.
      • The Blame will update.
    • Avaiable functions
      • Hover over the blame to see the Git blame information.
      • If you click on the blame then VSCode will load the relevant Git submission in tab.
      • If you right click on it, it brings up a VSCode menu where you can enable/disable items in the status bar including this extension.
  • VSCode: How to Show Git Blame | HatchJS.com
    • Learn how to show git blame in vscode with this step-by-step guide. Includes instructions on how to enable the Git Blame extension, view git blame information, and customize the blame view.
    • Git Blame is a powerful tool that can be used to track down the source of bugs or to see who made a particular change to a file. It is a valuable tool for any developer who works with Git.
    • To show the Git blame for a file in VS Code, follow these steps:
      1. Open the file you want to view the blame for.
      2. Press Ctrl+Shift+G to open the Git Blame view.
    • The Git Blame view will show you a list of all the commits that have changed the file. Each commit will be listed with the author’s name, the commit message, and the date and time of the commit. You can also click on a commit to see the changes that were made in that commit.

Copilot

  • General
  • Toggle Inline Suggestions
    • Open command palette and type one of these commands: 
      > GitHub Copilot: Toggle (Enable/Disable) Inline Suggestions
> GitHub Copilot: Enable Inline Suggestions
> GitHub Copilot: Disable Inline Suggestions
      • There are some Toggle plugins that will do these commands.
  • Disable Copilot
    • There are some Toggle plugins that I have found that disabel certain features rather than removing Copilot.
    • How can I disable GitHub Copilot in VS Code? - Stack Overflow - Covers several ways to completely disable Copilot. 
      "github.copilot.enable": { "*": false },
"github.copilot.editor.enableAutoCompletions": false,
"github.copilot.editor.enableCodeActions": false,
"github.copilot.nextEditSuggestions.enabled": false,
"github.copilot.renameSuggestions.triggerAutomatically": false,
"chat.commandCenter.enabled": false,
"chat.agent.enabled": false
    • How do I disable Copilot? · community · Discussion #147437 · GitHub
      • Q: Copilot has appeared on my GitHub WebUI and I wanted to ask where can I disable it? Thanks!
      • A:
        • To disable Copilot in Visual Studio Code, go to Extensions (Ctrl+Shift+X), then search for "GitHub Copilot" and click Disable.
        • Alternatively, go to the settings (Ctrl+,), search for "Copilot," and turn it off globally or for specific file types.
        • Restart VS Code to make sure the changes take effect.
      • Q: Disabling Copilot in the Web / in GitHub
        • A:
        • A:
          • To hide GitHub Copilot UI on github.com, so that you don't see any Copilot chat prompts you disable GitHub Copilot in your settings https://github.com/settings/copilot.
          • This will still work if you have never signed up for Copilot or even if a Copilot subscription was provided to you by your organization.

Specific / Recommendations

  • When I click on another file in the Explorer panel, it changes the file I am working on to it 
    "workbench.editor.enablePreview": false
  • VSCode allows the opening of a file more than once 
    "workbench.editor.revealIfOpen": true
    • Controls whether an editor is revealed in any of the visible groups if opened. If disabled, an editor will prefer to open in the currently active editor group. If enabled, an already opened editor will be revealed instead of opened again in the currently active editor group. Note that there are some cases where this setting is ignored, such as when forcing an editor to open in a specific group or to the side of the currently active group.
    • Links
  • Quick Suggestions / Inline Suggestions
    • VS Code Inline Suggestions - Neutron Dev
      • Learn how to turn on the inline quick suggestions in Visual Studio Code.
      • By default, VS Code shows code suggestions in a widget.
      • But if you want them to be shown inline, there is a new option just for that.

Automatically Apply Fixes (VSCode)

When you have your extensions setup and working you can go one step further and make them clean up your code automatically upon save or a click of a button.

  • VS Code Settings 
    {
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "prettier.requireConfig": true
}
    • editor.formatOnSave: Automatically formats your code when you save a file.
    • editor.defaultFormatter: Sets Prettier as the default formatter.
    • prettier.requireConfig: Ensures that Prettier only formats files if a configuration file is present.
  • Automate Your Coding Style: Set Up ESLint Auto-Formatting in VSCode - YouTube
    • Maintaining a consistent code style is crucial for any development project, and ESLint is a powerful tool that helps achieve this goal. But did you know you can automate the process directly within Visual Studio Code?
    • In this video, we'll guide you through setting up your VSCode environment to automatically format your files using ESLint every time you save, ensuring your code is always clean, readable, and adhering to your project's style guidelines.

Themes

I think the workbench is schemed by the theme, so you can almost say they are the same thing.

General
  • Themes | Visual Studio Code - Changing the color theme in Visual Studio Code. You can use color themes provided by VS Code, the community or create your own new themes.
  • How To Change & Edit Color Theme in Visual Studio Code - YouTube | Ghost Telepathy
    • How to change colors in VSCode? In Visual Studio Code you can select one of the color themes installed by default by pressing Ctrl K and then Ctrl T.
    • But you can also change an individual color (editor background color, text selection background color, etc) in VS Code.
    • Beyond that you can change colors of the actual editor frame (not the text area). This tutorial will show you how to do all of this!
  • Theme Color | Visual Studio Code Extension API - Theme Color reference that lists all themable colors in Visual Studio Code.
  • Themes are stored in the extensions folder. 
    C:\Users\<username>\.vscode\extensions\<theme name>\

C:\Users\<username>\.vscode\extensions\dracula-theme.theme-dracula-2.25.1\
C:\Users\<username>\.vscode\extensions\dracula-theme.theme-dracula-2.25.1\theme\
C:\Users\<username>\.vscode\extensions\dracula-theme.theme-dracula-2.25.1\theme\dracula.json
C:\Users\<username>\.vscode\extensions\dracula-theme.theme-dracula-2.25.1\theme\dracula-soft.json
  • How to automatically switch themes - 23 Stunning VSCode Themes for Any Lighting | Ayoub Khial
    • Light / Dark theme handling
    • Before starting with our curated collection, add the following fields to use user settings to automatically switch between light and dark themes in Visual Studio Code based on the operating system's appearance preferences. 
      {
    "window.autoDetectColorScheme": true,
    "workbench.preferredLightColorTheme": "Github Light",
    "workbench.preferredDarkColorTheme": "Github Dark",
    ...
}
    • You can use an extension to perform a manual toggle (Toggle Light/Dark Theme - Command to toggle the theme between light/dark.).
  • Token to Tooling: Generating VS Code Snippets from Design Tokens | by Eden Ella | Bits and Pieces - How to transform design tokens into useful VS Code snippets for faster, error-free coding.
What is my Active theme and related settings

Look in User/settings.json to see what your active theme and related setting are:

  • Specifies the color theme used in the workbench when `Window: Auto Detect Color Scheme` is not enabled. 
    "workbench.colorTheme": "Dracula Theme Soft"
  • Additional themes 
    "workbench.iconTheme": "material-icon-theme",
"workbench.productIconTheme": "material-product-icons",
  • If enabled, will automatically select a color theme based on the system color mode. 
    "window.autoDetectColorScheme": false
  • These control what theme is used when automatic theme detection is enabled 
    "workbench.preferredDarkColorTheme": "Default Dark Modern"
"workbench.preferredHighContrastColorTheme": "Default High Contrast"
"workbench.preferredHighContrastLightColorTheme": "Default High Contrast Light"
"workbench.preferredLightColorTheme": "Default Light Modern"
  • What font is being used 
    "editor.fontFamily": "Fira Code"
Theme Customisations

Without editing the theme itself you can override any colour setting at either a User or Workspace level.

  • How to Modify Themes in VSCode – Alvee's Blog - A guide for customizing VSCode to your heart's content.
  • How to Customize or Make your own VSCode Color Theme - DEV Community - This is a quick guide on how to customize the VSCode - both the Workbench and the Syntax.
  • Setting a per-project colour scheme in VSCode | by Juris | Medium
    • This article goes over how to customise your colour scheme per project or “workbench” as they are called in VSCode.
    • A well put together article and a good place to start.
    • Covers settings directly in then user's settings.json 
      "workbench.colorCustomizations": {
 },
    • How to change error styles in VS Code? - Stack Overflow 
      {
   "workbench.colorCustomizations": {
        "errorForeground": "#ffffff",
        "editorError.background": "#ff0000",
        "editorWarning.foreground": "#ffffff",
        "editorWarning.background": "#dddd00",
        "editorInfo.foreground": "#ffffff",
        "editorInfo.background": "#0000ff"
    }
},
  • Highlights
    • Highlights are applied on top of each other (and the token when present). They are just HTML element backgrounds with opacity set less than 100 which gives rise to the effect of the highlighting.
    • Change highlight text color in Visual Studio Code - Stack Overflow - Right now, it is a faint gray overlay, which is hard to see. Any way to change the default color?
    • How can I change the background highlight color associated with searching (find) for a color theme in VS Code? - Stack Overflow
    • Example: Customize Highlight Colors
      • For all templates 
        "workbench.colorCustomizations": {
   "editor.selectionBackground": "#ffcc00",             // Background of selected text
   "editor.selectionHighlightBackground": "#ffcc0040",  // Highlighted matches
   "editor.wordHighlightBackground": "#00ff0040",       // Word highlights
   "editor.findMatchBackground": "#ff000040",           // Current search match
   "editor.findMatchHighlightBackground": "#0000ff40"   // Other search matches
},
      • For a specific template 
        "workbench.colorCustomizations": {
    "[Your Theme Name Goes Here]": {
       "editor.selectionBackground": "#ffcc00",             // Background of selected text
       "editor.selectionHighlightBackground": "#ffcc0040",  // Highlighted matches
       "editor.wordHighlightBackground": "#00ff0040",       // Word highlights
       "editor.findMatchBackground": "#ff000040",           // Current search match
       "editor.findMatchHighlightBackground": "#0000ff40"   // Other search matches
    }
},
Example Theme setting explained

editor.findMatchBackground: !alpha [ *ORANGE, 80 ]

  • Rules Purpose: Use the ORANGE color, but make it 80% opaque, and apply it as the background for the current find match.
  • Rough CSS equivalent: background-color: rgba(255, 152, 0, 0.8);
  • editor.findMatchBackground
    • The VSCode setting for the background of the currently selected match when you use Find (Ctrl/Cmd + F).
  • !alpha
    • !alpha is a custom YAML tag used by VS Code theme files.
    • It applies transparency (alpha channel) to a color.
  • *ORANGE
    • This is a YAML anchor reference.
    • *ORANGE means: “Reuse the color value stored under the ORANGE anchor.”
    • Somewhere earlier in the theme file, there is likely a definition like: ORANGE: &ORANGE "#FF9800"
  • [ *ORANGE, 80 ]
    • This is the argument list for !alpha:
      • Base color: *ORANGE
      • Opacity level in percent: 80
Useful Theme variable names

If you just need to know what the variable names are (like what the "sidebar background" variable is called), the official Theme Color Reference is the best place to look.

Below are some useful variable names for customising your theme.

These can all be found on Theme Color | Visual Studio Code Extension API - Theme Color reference that lists all themable colors in Visual Studio Code.

Find colors depend on the current find string in the Find/Replace dialog.

editor.findMatchBackground:             Color of the current search match.
editor.findMatchForeground:             Text color of the current search match.
editor.findMatchBorder:                 Border color of the current search match.

editor.findMatchHighlightBackground:    Color of the other search matches. The color must not be opaque so as not to hide underlying decorations.
editor.findMatchHighlightForeground:    Foreground color of the other search matches.
editor.findMatchHighlightBorder:        Border color of the other search matches.

editor.findRangeHighlightBackground:    Color the range limiting the search (Enable 'Find in Selection' in the find widget). The color must not be opaque so as not to hide underlying decorations.
editor.findMatchForeground:             ** doesn't exist **
editor.findRangeHighlightBorder:        Border color the range limiting the search (Enable 'Find in Selection' in the find widget).

Search colors are used in the search viewlet's global search results.

search.resultsInfoForeground:           Color of the text in the search viewlet's completion message. For example, this color is used in the text that says "{x} results in {y} files".
searchEditor.findMatchBackground:       Color of the editor's results.
searchEditor.findMatchBorder:           Border color of the editor's results.
searchEditor.textInputBorder:           Search editor text input box border.

The current line is typically shown as either background highlight or a border (not both).

editor.lineHighlightBackground:         Background color for the highlight of line at the cursor position.
editor.inactiveLineHighlightBackground: Background color for the highlight of line at the cursor position when the editor is not focused.
editor.lineHighlightBorder:             Background color for the border around the line at the cursor position.
How to Identify or Inpsect any Element in VSCode
  • Tokens / Theme Elements
    • This is for code inside the editor (keywords, strings, comments, variables, etc.).
    • Steps
      • Open the file and place your cursor on the text
      • Open the command palette. (Windows: Ctrl+Shift+P or F1) (macOS: Cmd+Shift+P)
      • Run Developer: Inspect Editor Tokens and Scopes
      • Now click on an element in your code and you will see a popup showing:

        • Standard information
          • forground: Font colour of the token
          • background: Standard background colour or token background colour (of defiend)
        • textmate scopes
          • used by themes
          • with Semantic token type/modifiers
        • foreground
          •  Font colour of the token
        • NB: This does not give highlighting colours as they are not part of the underlying token.
    • Useful Links
  • VSCode UI Elements
    • This is for UI elements like:
      • Activity Bar
      • Sidebar
      • Tabs
      • Status bar
      • Title bar
      • Buttons
    • Steps
      • Help --> Toggle Developer Tools
        • Edge Developer Tools will now open.
      • In the Edge Developer Tools, inspect any element in VSCode like you would a webpage.
        1. Click the Elements tab in the Edge windows (if not selected already)
        2. Use the element picker (top-left icon / A square with an arrow)
        3. Now select the VS Code UI element you want to inspect
      • You’ll see CSS classes like: 
        .monaco-workbench
.part.sidebar
.statusbar
.editor-group-container
        • These don’t use CSS, but they hint at the color key name.
  • VSCode Settings UI (Color Picker trick)
    • This is very effective for discovery.
    • Steps
      1. Open Settings
      2. Search for colorCustomizations
      3. Add a color entry
      4. VS Code shows autocomplete for every valid UI color key
  • Generate Color Theme (JSON) from Current Settings
    • VS Code exposes exact setting names for UI parts with their calculated values at time of generation.
    • Open the command palette
    • Run: Developer: Generate Color Theme From Current Settings
    • VS Code will open a new, unsaved JSON tab containing the entire color profile of your current theme.
      • You can browse this to find the specific Hex codes the theme is currently using. I don't think it just gets the default values.
      • This generates a file, it does not alter your theme's settings but can be used to create a new color theme.
Make your own theme
  • How can I find the folder of the theme I'm using in VS Code - Stack Overflow
    • Another option is to use the Visual Studio Code Extension Generator. The generator enables you to create a plain vanilla theme extension which you can customize to your liking and (almost) install like any other third party theme. You can find more information on how to install and run it here.
    • To make things a little easier your can create a theme file, based on the current theme, by running the Developer: Generate Color Theme from Current Settings command from the Command Palette. This will create a temporary file in VS Code with all of the settings and customizations of your current theme. You can copy + paste the contents to the theme file of your "plain vanilla" file you created with the generator.
    • To install your theme you can run the Developer: Install Extension from Location command from the Command Palette. Just remember not to change the location of your local extension. Otherwise VS Code won't find it with the next update.

Troubleshooting

  • Unable to save User settings.
    • You are prompted with this notification, usually at the bottom right of the editor when you try and save some settings. 
      Unable to write into user settings. Please open the user settings to correct errors/warnings in it and try again.

    • Open the relevant User settings.json and fix the error such as the one shown below
      • The error here is displayed inline, but yours might only be displayed in the PROBLEMS panel.
    • Links

Workspaces

  • A Workspace is a collection of one or more folders that are open in a VSCode instance.
    • Most of the time you'll only have one folder open which means you are using a Single Folder workspace.
    • A Multi-root Workspace is when you have nore than one root folder open.
  • The terms Root Folder and Project Folder are all interchangeable and just mean the root folder of your project.
  • You can use the term Workspace when referring to your Project Folder, as most people will understand what you mean even though it is not strictly correct.

Extensively this is your project's folder for both source files and config files.

General

Types of Workspaces

This is a collection of notes and the different type of workspace to hekp me defin their uses.

  • Workspaces Explained
  • Workspaces / Root Folder / Project folder
    • Workspaces in Visual Studio Code - Official Docs
      • You may see the terms "folder" and "workspace" used interchangeably in VS Code documentation, issues, and community discussions.
      • Think of a workspace as the root of a project that has extra VS Code knowledge and capabilities.
      • Single-folder workspaces: You don't have to do anything for a folder to become a VS Code workspace other than open the folder with VS Code. Once you open a folder, VS Code automatically keeps track of configuration, such as your open files or editor layout. When you reopen that folder in VS Code, the editor will be as you left it previously.
      • A "workspace" is just your project's single root folder.
    • What is a VS Code workspace? | Visual Studio Code - A Visual Studio Code workspace is the collection of one or more folders that are opened in a VS Code window (instance). In most cases, you will have a single folder opened as the workspace. However, depending on your development workflow, you can include more than one folder, using an advanced configuration called Multi-root workspaces.
  • Multi-root Workspaces  / .code-workspace
    • Supercharge Your Workflow: VS Code Multi-Root Workspaces - YouTube | Jeremy Shanks
      • Join me today as I dive into the versatile world of Visual Studio Code's multi-root workspaces. I'll show you how to manage multiple projects efficiently within a single editor instance, enhancing your workflow and productivity.
      • A Workspace is a collection of one or more folders that are open in a VSCode instance.
        • Most of the time you'll only have one folder open which means you are using a Single Folder workspace.
        • A Multi-root Workspace is when you have nore than one root folder open.
    • Multi-root workspaces are an advanced capability of VS Code that allows you to configure multiple distinct folders to be part of the same workspace. Instead of opening a folder as workspace, you open a <name>.code-workspace JSON file that lists all folders of the workspace. 
    • A .code-workspace file in Visual Studio Code is used to define a multi-root workspace. This file allows you to manage multiple project folders within a single workspace, making it easier to work on related projects simultaneously. The .code-workspace file contains an array of folders and workspace settings, which can be shared with others in a version-controlled project. To open a .code-workspace file, you can go to the menu and select File → Open Workspace.
    • Multi-root Workspaces | Visual Studio Code
      • You can open and work on multiple project folders in Visual Studio Code with multi-root workspaces.
      • Unless you are explicitly creating a multi-root workspace, a "workspace" is just your project's single root folder.
      • A Visual Studio Code (VS Code) workspace is a collection of one or more folders that are opened in a VS Code window. This concept allows developers to manage settings, tasks, and configurations specific to their projects. Workspaces can be single-folder or multi-root, depending on the development workflow.
      • Single-folder Workspaces: In a single-folder workspace, you simply open a folder in VS Code, and it automatically tracks configurations such as open files and editor layout. This setup is straightforward and ideal for most projects. You can also add folder-specific configurations like workspace-specific settings, task definitions, and debugging launch files.
      • Multi-root Workspaces: Multi-root workspaces allow you to work with multiple distinct folders in the same workspace. This is useful when working on related projects simultaneously. You can create a multi-root workspace by opening a .code-workspace JSON file that lists all the folders in the workspace.
    • Multi-root Workspaces | Visual Studio code - You can open and work on multiple project folders in Visual Studio Code with multi-root workspaces.
    • Multi-root workspaces - VS Code extension | Biome - simple explanation and a diagram.
    • Multi-root Workspaces in Visual Studio Code (2025)
    • Working with Multiple Projects in VS Code - YouTube | DigitalOcean - We'll go through the different tools that help work with multiple projects in VS Code. These are ways to quickly switch between projects and to also differentiate between multiple VS Code windows.

Sharing Settings

  • Sync VSCode Settings (inbuilt)
    • This is just for your user, not for sharing settings between teams, colleagues and collaborators.
    • Settings Sync | Visual Studio Code
      • Synchronize your user settings across all your Visual Studio Code instances.
      • Settings Sync lets you share your Visual Studio Code configurations such as settings, keyboard shortcuts, and installed extensions across your machines so you are always working with your favorite setup.
  • Shared Settings / Recommended Extensions

Monorepo

  • These are not Workspaces.
  • A monorepo is a single sourcecode repository that contains many often unrelated projects.
    • These project will most likely be in their own sub-folder and are just projects in folders, but they could be a VSCode Workspace depending on how you have things setup.

Profiles

These can have different settings and extensions for different scenarios

  • VSCode profiles allow you to create and manage personalized setups for different coding environments, making it easy to switch between configurations tailored to specific projects.
  • What are VSCode Profiles?
    • VSCode profiles are a feature that enables you to save and switch between different sets of preferences, configurations, and extensions. This is particularly useful if you work on various projects that require distinct setups, such as web development, Python programming, or other specialized tasks. Profiles help you maintain organization and efficiency by allowing you to quickly adapt your development environment without manually changing settings each time.
  • Profiles in Visual Studio Code | Visual Studio Code - Expand your development workflow with task integration in Visual Studio Code.
  • VSCode Profiles: Optimize Your Coding Environment - DEV Community
    • You may often work on multiple projects that require different settings, extensions, and configurations. Keeping track of all these customizations can be time-consuming and frustrating. Especially if you switch between projects.
    • This is where VS Code profiles come in.
  • Profile Templates - Profiles in Visual Studio Code | Visual Studio Code - VS Code comes with a predefined set of profile templates that you can use to customize VS Code for your specific workflow. To create a new profile based on a template, select a Profile Template when going through the Create Profile flow.

Copilot / AI

Tutorials (misc)

Troubleshooting / Errors / Problems

General

  • Everytime I click on a line a username and date is displayed?
    • This is a Git Blame which is essentially a reference to who commited this line to the repo.
    • Having the Git Blame information pop up everytime you click a different line is so annoying but usually this can be turned off.
    • Many extensions can add Git blame information into the code display such as: GitLens, Git Blame, Git History Diff
  • Why when I open text files created in Windows and then save them, VSCode is changing the EOL from CRL to LF?
    • It isn't. Here are some explanations
      1. An extension is performing the change.
      2. The file does not have any EOL due to it having 1 or less lines where an EOL is not needed.
      3. The line type in the status bar depends on there being some EOL characters in the file, if there are none then this status bar icon just shows the default EOL as defined in files.eol
  • "Open with Code" has disappeared from my Windows 11 File Explorer context menu
  • When examining some code, the Functions/Methods/Variables (Symbols) are missing on the left
    • They should be undet the `OUTLINE` Panel
    • Instead you see the error: 
      No symbols found in document 'YourFilenameHere.php'
    • Soutions
      • You need an appropriate extension to parse the symbols. In this example I needed to enable `PHP Intelephense` so i could see the functions/methods in the OUTLINE panel.
      • If the `OUTLINE` panel is missing: click on the 3 dots at the top of the `EXPLORER` columen, select `OUTLINE`.
      • Run the `Reset View Locations` command from the Command Palette.
    • Links

Window Focus / File Focus Issues

  • How do I change the Editor Window focus?
    • Each editor instances only has the one primary editor window and this cannot be changed.
    • This means you cannot change the window focus for the purpose of opening new files in a particular editor window.
  • When I click on a new file in the explorer it's position jumps randomly
    • This is probably happening because you were working in a secondary editor window and then you go to open another file from the explorer panel. When you do this, you are actually selecting the primary editor window which causes the explorer to update it's position to match the file which the primary editor window has open. You then have to click again the in the explorer to open the new file.
    • If selecting another tab in the primary editor windows, the explorer's position will automatically update to match the tab's file and when you click on a new file in the explorer a second click will not be required.
    • The Explorer: Auto Reveal setting will prevent the explorer from moving it's position upon focus and should prevent some of this unexpected movement.
      "explorer.autoReveal": "focusNoScroll"
      • Controls whether the Explorer should automatically reveal and select files when opening them.
      • It has a couple of options
        • true = Files will be revealed and selected.
      • false = Files will not be revealed and selected.
      • focusNoScroll = Files will not be scrolled into view, but will still be focused.
  • How to focus editor after clicking file in the VS Code Explorer View? - Stack Overflow
    • Using the keyboard and not the mouse, pressing enter should automatically move focus to the opened editor. 
    • You can also look into the following settings and binding them to keyboard shortcuts.
      • explorer.openAndPassFocus
      • filesExplorer.openFilePreserveFocus 
  • Setting to focus editor on mouse click · Issue #166118 · microsoft/vscode · GitHub
    • Possible workaround? Set Workbench > List: Open Mode to "doubleClick" ("workbench.list.openMode": "doubleClick")
    • Single clicks will no longer open files from the Explorer, and a double click appears to properly set input focus to the selected file. (VSC version 1.79.2 on Mac Ventura.)
    • I just found out there is an extension for this, search for: "Focus file on click" from Steven Rafferty. Thanks Steven!
    • There is also Focus on Click by OzerGul
  • When window gets focus it changes the selected file in Explorer · Issue #238358 · microsoft/vscode · GitHub
    • This is a new bug that has been reported.
    • When using multiple windows, if the focus on the main window is lost, when clicking on a file in "EXPLORER" it first changes the currently selected file to the one opened in the main window then it opens the wrong file from the list

Setup your Project (Cheatsheet)

This assumes you have VSCode installed with the relevant extensions, that you have GitHub account and that all of your User settings are set as required (i.e. EOL)

VSCode User Settings

These are your user preferences and are stored on the computer you are working on and not in the project's folder.

These settings will override the VSCode defaults but can be overridden by workspace settings.

.vscode/settings.json

{
    /* General Settings */

    "files.eol": "\n",                           // Default Line Ending
    "editor.fontFamily": "Fira Code",            // Set `Fira Code` as my editor font
    "editor.renderWhitespace": "trailing",       // Show unwanted whitespace (none|boundary|selection|trailing|all)
    
    /* Render Line Endings || code-eol */
    
    //"code-eol.newlineCharacter": "↓",
    //"code-eol.returnCharacter": "←",
    //"code-eol.crlfCharacter": "↵"
    "code-eol.highlightNonDefault": true,
    "code-eol.highlightExtraWhitespace": true
}

Default Repo Config Files

  • Use .editorconfig whenever possible because not everyone has VSCode.
  • Remember that .editorconfig support varies between editors, so some editors will have no, partial or full support.
  • Change the settings below to make CRLF default when your project or setup requires it.
  • Prequsites:
    • ESLint
    • Prettier
    • EditorConfig for VS Code
    • NPM and NodeJS to be installed (for ESLint)
    • Correct triggers for Prettier and ESLint need to be enables in VSCode settings (either through the GUI or the settings file)

These can be used as a good starting point for your repository. These rules sef LF as the default line ending which you can override at any point. There are also some specific rules to allow the correct functioning of some Windows files.

.vscode/settings.json

{
    /* General Settings */

    "files.eol": "\n",                                        // Default Line Ending  
    "editor.formatOnSave": false,                             // Format on save (needed for Prettier)  
    //"editor.defaultFormatter": "esbenp.prettier-vscode",    // Default Formatter  
    "editor.codeActionsOnSave": {                             // Run these commands on save

        // When should ESLint run
        // true       = Automatically applies all ESLint autofixable rules every time you save a file.
        // "explicit" = Only applies ESLint fixes on save if you explicitly configured ESLint to run on save in your project (via Flat Config or legacy .eslintrc),  
        //              or if there's a specific ESLint comment (/* eslint-env */, etc.) in the file. 
        // "always"   = Triggers ESLint fixes on both manual and auto-saves.
        // "never"    = Disables ESLint auto-fix on save.   
        "source.fixAll.eslint": "never"

    },  

    /* Prettier */

    //"prettier.useTabs": false,               // Indent Style  
    //"prettier.tabWidth": 4,                  // Spaces per indentation

    /* ESLint */

    // Settings: https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint#settings-options

    "eslint.enable": false,                    // Enable ESLint - Disabled here to prevent accidental use until configured as required  
    "eslint.useFlatConfig": true,              // Use the Flat Config system (for ESLint v8.57+ to v10.00)  
    "eslint.workingDirectories": ["./src"],    // Control ESLint working directories  
    "eslint.format.enable": false,             // Format using ESLint (if formatting is configured in the rules)

}

.vscode/extensions.json (Recommended Extensions)

{   
    "recommendations": [ 
        "EditorConfig.EditorConfig",
        "esbenp.prettier-vscode",
        "dbaeumer.vscode-eslint"
    ]
}

.editorconfig

# EditorConfig is awesome: https://EditorConfig.org

# top-most EditorConfig file
root = true

# Default settings (fallback)
[*]
indent_style = space
indent_size = 4
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.php]
indent_style = space
indent_size = 4

[*.{mjs,js,json,scss,css,yml,vue}]
indent_style = space
indent_size = 2

# Force batch scripts to always use CRLF line endings so that if a repo is accessed
# in Windows via a file share from Linux, the scripts will work.
[*.{[bB][aA][tT],[cC][mM][dD]}]
end_of_line = crlf

# Force bash scripts to always use LF line endings so that if a repo is accessed
# in Unix via a file share from Windows, the scripts will work.
[*.sh]
end_of_line = lf

# Exclude Files and Folders (Paths)
[/{localonly,vendor}/**]
generated_code = true
indent_style = unset
indent_size = unset
tab_width = unset
end_of_line = unset
charset = unset
trim_trailing_whitespace = unset
insert_final_newline = unset
  • Official Sites
    • EditorConfig.org
      • EditorConfig is a file format and collection of text editor plugins for maintaining consistent coding styles between different editors and IDEs.
      • The EditorConfig project consists of a file format for defining coding styles and a collection of text editor plugins that enable editors to read the file format and adhere to defined styles. EditorConfig files are easily readable and they work nicely with version control systems.
    • EditorConfig Specification | EditorConfig - The latest official specification.
  • General
    • Why?
      • The .editorconfig file is used to maintain consistent coding styles across different editors and IDEs, including Visual Studio Code (VSCode). It allows you to define settings such as indentation style, tab width, and line endings, ensuring that all contributors to a codebase adhere to the same formatting rules.
      • The benefit of using .editorconfig, is that
        • irrelevant of how your colleagues hav configured their editor, the settings in the .editorconfig will be used for the project (if their editor supports this file) keeping everones settings synced.
        • .editorconfig is editor agnostic which means that 2 colleagues can be using a different editor but share the same settings.
    • Editor Support
      • A user should be aware that not all .editorconfig values might be supported in a specific extension or plugin. 
      • Visual studio VS2019 (i.e. full) supports .editorconfig out of the box.
      • Visual Studio code needs a plugin to enable .editorconfig support.
        • To use .editorconfig in VSCode, you can install the EditorConfig plugin, which automatically applies the settings defined in the .editorconfig file, overriding user or workspace settings if necessary.
    • What is it?
      • The .editorconfig is a text file that overrides the settings of your editor.
      • The .editorconfig file is found in the usually root of your project but the spec allows for a heiracchihal system where child .editorconfig files can override their parent.
      • The top most .editorconfig must be specified as the root file otherwise, plugins will keep looking further up the file tree for further .editorconfig configuration files.
  • Why should I add a new line?
    • What's the point in adding a new line to the end of a file? - Unix & Linux Stack Exchange
      • It's not about adding an extra newline at the end of a file, it's about not removing the newline that should be there.
      • There are/were some C compilers that cannot parse the last line if it does not end with a newline. The C standard specifies that a C file should end with a newline (C11, 5.1.1.2, 2.) and that a last line without a newline yields undefined behavior (C11, J.2, 2nd item). Perhaps for historic reasons, because some vendor of such a compiler was part of the committee when the first standard was written. Thus the warning by GCC.
      • diff programs (like used by git diff, github etc.) show line by line differences between files. They usually print a message when only one file ends with a newline because else you would not see this difference. For example if the only difference between two files is the presence of the last newline character, without the hint it would look like the both files were the same, when diff and cmp return an exit-code unequal success and the checksums of the files (e.g. via md5sum) don't match.
      • So for that last line to be recognised as an actual "line" it should have a terminating new line character.
    • Hidden Files
      • The VS Code EditorConfig extension ignores hidden files and folders (e.g. those that are marked as hidden by the OS on Windows or Unix-like systems) and I would assume any paths that are hidden by VSCode.
  • Configuration
    • Parts of an EditorConfig file | EditorConfig Specification
      • Section Name: the string between the beginning [ and the ending ].
      • This means the regex parser ignors the wrapping [].
    • Supported Pairs (Properties / Declarations / Options) | EditorConfig Specification - The full list of supported settings for EditorConfig.
    • Alternative section name files using curley braces (not tested) 
      [*.{b,B}{a,A}{t,T}, *.{c,C}{m,M}{d,D}],
    • Glob Expressions | EditorConfig Specification
      • Section names in EditorConfig files are filepath globs, similar to the format accepted by .gitignore.
      • They support pattern matching through Unix shell-style wildcards.
      • These are the rules on building a matching pattern.
    • File Format | EditorConfig
      • EditorConfig files use an INI format that is compatible with the format used by Python ConfigParser Library, but [ and ] are allowed in the section names.
      • The section names are filepath globs, similar to the format accepted by gitignore.
      • Forward slashes (/) are used as path separators and semicolons (;) or octothorpes (#) are used for comments.
      • Comments should go individual lines. EditorConfig files should be UTF-8 encoded, with either CRLF or LF line separators.
      • Filename globs containing path separators (/) match filepaths in the same way as the filename globs used by .gitignore files. Backslashes (\) are not allowed as path separators.
      • A semicolon character (;) starts a line comment that terminates at the end of the line. Line comments and blank lines are ignored when parsing.
      • Comments may be added to the ends of non-empty lines.
      • An octothorpe character (#) may be used instead of a semicolon to denote the start of a comment.
    • MarkdownTrailing space issue
      • Why is this code needed (or not)? 
        [*.md]
trim_trailing_whitespace = false
      • In Markdown, trailing whitespace at the end of a line can have specific formatting effects:
        • Two spaces at the end of a line create a line break (<br> in HTML).
        • If this is unintentional, it can lead to unexpected layout issues in rendered documents.
      • TIL That two trailing spaces indicates a line break in Markdown — David Winterbottom
        • Markdown supports hard linebreaks by ending a line with two spaces. Don’t strip trailing whitespace in yourMarkdown editor pre-save hooks.
      • Trailing whitespace - Markdown style guide | styleguide
        • Don’t use trailing whitespace. Use a trailing backslash to break lines.
        • The CommonMark spec decrees that two spaces at the end of a line should insert a <br /> tag. However, many directories have a presubmit check for trailing whitespace, and many IDEs will clean it up anyway.
        • Use a trailing backslash, sparingly:
        • Best practice is to avoid the need for a <br /> altogether. A pair of newlines will create a paragraph tag; get used to that.
      • The Dead Simple Markdown Guide to Line Breaks | HackerNoon - Learn how to create line breaks in Markdown using trailing whitespace, HTML tags, and other techniques.
      • Line Breaks - Basic Syntax | Markdown Guide
        • To create a line break or new line (<br>), end a line with two or more spaces, and then type return.
        • You can use two or more spaces (commonly referred to as “trailing whitespace”) for line breaks in nearly every Markdown application, but it’s controversial.
        • If your Markdown application supports HTML, you can use the <br> HTML tag.
        • For compatibility, use trailing white space or the <br> HTML tag at the end of the line.
        • CommonMark and a few other lightweight markup languages let you type a backslash (\) at the end of the line, but not all Markdown applications support this.
      • Trim Trailing Whitespace Breaks Markdown · Issue #1679 · microsoft/vscode · GitHub
        • Successfully disabled files.trimTrailingWhitespace for Markdown using language specific settings. Snippet from my settings.json: 
          "files.trimTrailingWhitespace": true,
"[markdown]": {
    "files.trimTrailingWhitespace": false
},
    • Exclude Files and Folders (Paths)
      • There are a couple of ways to exlude paths from your .editorconfig
        1. generated_code 
          [/vendor/**]
generated_code = true
        2. unset 
          [/vendor/**]
indent_style = unset
indent_size = unset
tab_width = unset
end_of_line = unset
charset = unset
trim_trailing_whitespace = unset
insert_final_newline = unset
          • [/vendor/**] matches all files and folders recursively inside the `vendor` folder.
        3. Empty root .editorconfig file 
          # This file prevents parsing of this folder and it's children by EditorConfig - Do NOT delete
root = true
          • This is more of a workaround.
          • This file is defined as a root .editorconfig file and as such no futher .editorconfig files will be looked for preventing settings being pulled from additional config files.
          • There are no "path actionable" settings defined in this file so this file prevents any alterations to the files in this folder or any of it's children.
    • Deprecate `max_line_length` in favor of `rulers` · Issue #387 · editorconfig/editorconfig · GitHub
      • `max_line_length` has been deprecated
  • Tutorials
  • Tools
  • Misc
    • If I use the `Generate .editorconfig` options in VSCode (via the right click context menu) I get the following file: 
      # EditorConfig is awesome: https://EditorConfig.org

# top-most EditorConfig file
root = true

[*]
indent_style = space
indent_size = 4
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = false
insert_final_newline = false
    • Standard Tabs, Spaces and Indent settings (I asked ChatGPT)
      • Q: Are there any websites that give spaces/tabs/indentation recommendations for various files and formats?
      • A: Yes, there are several websites that offer indentation, tab/space, and general formatting style recommendations for various file types and programming languages. Here are some of the most reliable ones:
        File Type Language / Format Indent Type Indent Size Notes / Style Guide
        .py Python Spaces 4 PEP 8
        .js, .ts JavaScript / TypeScript Spaces 2 Airbnb Style, Prettier
        .json JSON Spaces 2 Common readability standard
        .html, .css HTML / CSS Spaces 2 W3C, Prettier
        .scss, .less Sass / Less Spaces 2 Follows CSS conventions
        .java Java Spaces 4 Google Java Style
        .c, .cpp, .h C / C++ Spaces 2 or 4 Google: 2, LLVM: 2, Linux Kernel: Tabs
        .go Go Tabs N/A gofmt
        .rb Ruby Spaces 2 Ruby Style Guide
        .php PHP Spaces 4 PSR-12
        .xml, .yml, .yaml XML / YAML Spaces 2 YAML requires spaces
        .md Markdown Spaces 2 or 4 Depends on processor
        .cs C# Spaces 4 Microsoft Style
        .swift Swift Spaces 4 Raywenderlich Swift Guide
        Makefile Make Tabs N/A Tabs required in Makefiles
        .sh, .bash Shell Scripts Spaces 2 or 4 Flexible, depends on team preference
        .rs Rust Spaces 4 rustfmt
    • Q: Can you take the rules in this table and make an .editorconfig file?
    • A: Yes, here you go: 
      # top-most EditorConfig file
root = true

# Default settings (fallback)
[*]
indent_style = space
indent_size = 4
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

# Python
[*.py]
indent_style = space
indent_size = 4

# JavaScript / TypeScript / JSON
[*.js]
indent_style = space
indent_size = 2

[*.ts]
indent_style = space
indent_size = 2

[*.json]
indent_style = space
indent_size = 2

# HTML / CSS / SCSS / Less
[*.html]
indent_style = space
indent_size = 2

[*.css]
indent_style = space
indent_size = 2

[*.scss]
indent_style = space
indent_size = 2

[*.less]
indent_style = space
indent_size = 2

# YAML
[*.{yml,yaml}]
indent_style = space
indent_size = 2

# Markdown
[*.md]
trim_trailing_whitespace = false
indent_style = space
indent_size = 2

# Shell scripts
[*.sh]
indent_style = space
indent_size = 2

# C, C++, Header files
[*.{c,cpp,h,hpp}]
indent_style = space
indent_size = 4

# Java
[*.java]
indent_style = space
indent_size = 4

# C#
[*.cs]
indent_style = space
indent_size = 4

# PHP
[*.php]
indent_style = space
indent_size = 4

# Ruby
[*.rb]
indent_style = space
indent_size = 2

# Go (tabs required)
[*.go]
indent_style = tab

# Makefiles (tabs required)
[Makefile]
indent_style = tab

# Rust
[*.rs]
indent_style = space
indent_size = 4
    • The empty last line is intentional as it was added by ChatGPT, but the file will operate fine without it.

.prettierrc

(only needed if using Prettier)

{
    // Defaults
    "useTabs": true,
    "tabWidth": 4,
    "endOfLine": "lf",
    "options.editorconfig": true,  // Use .editorconfig - This setting might of been deprecated.

    // File Specific Overrides
    "overrides": [

        // Languages
        {
            "files": ["*.php"],
            "options": {
                "useTabs": false,
                "tabWidth": 4
            }
        },
        {
            "files": ["*.{mjs,js,json,scss,css,yml,vue}"],
            "options": {
            "useTabs": false,
            "tabWidth": 2
            }
        },

        // Force batch scripts to always use CRLF line endings
        {
            "files": ["*.[bB][aA][tT]","*.[cC][mM][dD]"],
            "options": {
            "endOfLine": "crlf"
            }
        },

        // Force bash scripts to always use LF line endings
        {
            "files": "*.sh",
            "options": {
            "endOfLine": "lf"
            }
        }
    ]
}
  • General
    • Prettier uses micromatch under the hood for files, which supports glob patterns but not full regular expressions or case-insensitive matching out of the box.
    • Braces - micromatch/micromatch | GitHub - Brace patterns can be used to match specific ranges or sets of characters.
    • Micromatch is case-sensitive by default, but when you use character classes like [bB], you're explicitly accounting for both cases.
    • Documentation · Prettier
  • Configuration
    • Configuration File · Prettier
      • You can configure Prettier via (in order of precedence) = This gives a list of the priority order of the different Prettier config files.
      • The configuration file will be resolved starting from the location of the file being formatted, and searching up the file tree until a config file is (or isn’t) found.
      • Prettier intentionally doesn’t support any kind of global configuration. This is to make sure that when a project is copied to another computer, Prettier’s behavior stays the same. Otherwise, Prettier wouldn’t be able to guarantee that everybody in a team gets the same consistent results.
      • Overrides let you have different configuration for certain file extensions, folders and specific files.
      • EditorConfig - Configuration File · Prettier
        • If a .editorconfig file is in your project, Prettier will parse it and convert its properties to the corresponding Prettier configuration. This configuration will be overridden by .prettierrc, etc.
    • Alternative files line using braces. 
      "files": ["*.{b,B}{a,A}{t,T}", "*.{c,C}{m,M}{d,D}"],
    • prettier config set line endings by filename - Bing Search
      • overrides: Specifies custom settings for specific file patterns
      • Ensure your Prettier version supports the overrides property (introduced in Prettier 1.15).
    • Are "files" declarations in .prettierrc case-sensitive?
      • Yes, they are case-sensitive on case-sensitive file systems (like ext4 on Linux). However, on case-insensitive file systems (like NTFS on Windows or APFS on macOS by default), the matching behaves as case-insensitive in practice — because the filesystem itself doesn't distinguish between *.BAT and *.bat.
        • But Prettier itself does not support case-insensitive glob matching directly in its config, meaning:
          • If you write "files": ["*.bat"], it will not match MYFILE.BAT on a case-sensitive file system.
          • On Windows, you might not notice the issue due to NTFS's case insensitivity.
        • So: yes, files is case-sensitive in Prettier.
    • .editorconfig
  • Tutorials

.eslint.config.js

(only needed if using ESLint)

// A decent starter config for ESLint V9.0.0+ (From quantumwarp.com)

// CSS, and HTML plugins need installing, edit as required.

import { defineConfig } from "eslint/config";
import css from "eslint-plugin-css";
import html from "@html-eslint/eslint-plugin";
import js from "@eslint/js";

export default defineConfig([
  // Default Line Ending
  {
    files: ["**/*.*"],
    rules: {
      "linebreak-style": ["error", "unix"],
    },
  },

  // CSS rules
  {
    files: ["**/*.css"],
    plugins: {
      css,                                          // Shorthand for `css: css`            
      //css: cssPlugin,                             // key: name used in rules, value: actual plugin object (eg: `cssPlugin` is from: `import cssPlugin from "eslint-plugin-css";`)
    },
    //language: "css/css",                          // Only needed if your plugin doesn’t automatically register a parser, or you want to be explicit. This is needed when not extending a premade ruleset.
    extends: ["plugin:css/recommended"],            // (optional) Extends and uses, the exisiting `recommended` ruleset from the imported `css` config with the rules below.
    rules: {                                        // Custom rules, these are just examples.
      //"css/no-duplicate-properties": "error",       // Throw an error if duplicate CSS properties within the same ruleset are detected.
      //"css/no-invalid-hex": "error",                // throw an error if invalid hexadecimal color values are detected.
    },
  },

  // HTML rules
  {
    files: ["**/*.html"],
    plugins: {
      html,                                         // Shorthand for `html: html`
      //html: htmlPlugin,                           // key: name used in rules, value: actual plugin object (eg: `htmlPlugin` is from: `import htmlPlugin from "@html-eslint/eslint-plugin";`)
    },
    //language: "html/html",                        // Only needed if your plugin doesn’t automatically register a parser, or you want to be explicit.   
    extends: ["plugin:@html-eslint/recommended"],   // (optional) Extends and uses, the exisiting `recommended` ruleset from the imported `html` config with the rules below. This is needed when not extending a premade ruleset.
    rules: {                                        // Custom rules, these are just examples.
      //"@html-eslint/indent": "error",               // Throw an error when inconsistent indentation is detected
      //"@html-eslint/no-duplicate-id": "error",      // Throw an error when a duplicate ID is detected.
    },
  },

  // JavaScript rules
  {
    files: ["**/*.js"],
    plugins: {
      js,                                           // Shorthand for `js: js`
      //js: jsPlugin,                               // key: name used in rules, value: actual plugin object (eg: `jsPlugin` is from: `import jsPlugin from "@eslint/js";`)
    },
    //language: "js/js",                            // I don't think this is ever needed as JavaScript support is builtin natively and not added via a plugin.
    extends: ["js/recommended"],                    // (optional) Extends and uses, the exisiting `recommended` ruleset from the imported `js` config with the rules below.
    rules: {                                        // Custom rules, these are just examples.
      //"no-unused-vars": "warn",                     // Warn if there are unused declared variables
      //"no-console": "warn",                         // Warn when using console.log
      //"eqeqeq": ["error", "always"],                // Enforce === instead of ==  
      //"curly": ["error", "all"],                    // Require curly braces for all blocks
      //"prefer-const": "error",                      // Suggest const for variables that never change  
    },
  },

  // Force batch scripts to always use CRLF line endings
  {
    files: ["**/*.[bB][aA][tT]","**/*.[cC][mM][dD]"],
    rules: {
      "linebreak-style": ["error", "windows"],
    },
  },
  
  // Force bash scripts to always use LF line endings
  {
    files: ["**/*.sh"],
    rules: {
      "linebreak-style": ["error", "unix"],
    },
  },
  
]);
  • "files:" is case sensitive
  • "*.js"
    • Only matches JavaScript files in the root directory (where your ESLint config lives).
    • Does not match files in subdirectories.
  • "**/*.js"
    • Matches .js files recursively in all folders.
    • This is almost always what you want in a real project.
  • Edit this file to what you need. I put all of the annotations in because the Flat config syntax has just be made the default paradigm and is complicated to understand. The older config syntax has been deprecated.
  • ESLint does not support CR line endings.

.gitattributes

(Modified - .gitattributes Best Practices - Muhammad Rehan Saeed)

##########################
# Normalize Line Endings #
##########################
 
# Default Line Ending
* text=auto eol=lf
 
# Force batch scripts to always use CRLF line endings so that if a repo is accessed
# in Windows via a file share from Linux, the scripts will work.
*.{[bB][aA][tT],[cC][mM][dD]} text eol=crlf
 
# Force bash scripts to always use LF line endings so that if a repo is accessed
# in Unix via a file share from Windows, the scripts will work.
*.sh text eol=lf
  • Altering line endings using Git is a fallback method to catch those files you miss. If your workspace is setup correctly this stage should not be needed.

.gitignore

# Editor Configs
/.vscode/
/nbproject/
/node_modules/
package-lock.json
package.json

# Local Storage
/localonly/
  • If you want to share your VScode you need to comment out or delete the line /.vscode/ line.

Start your Project

Follow each of the sections below to confgure your local project folder with Git integration.

Common

  • Create a local folder (this will be your workspace for you project) or re-use a pre-existing project folder (i.e. VSCode or NetBeans).
    • Pre-exisiting should have the hidden folder /.git/ if you want to use the pre-exisitng Git connection. 
  • Open your project folder in VSCode as follows:
    • File --> Open Folder --> `.../YourProjectFolder/`

Configure Git

Your project will have one of the following scenarios, so pick the relevant section and follow the instructions for Git.

Existing Netbeans Project which has a local Git repository

During this setup process I am not asked for specific credentials for my remote repository, the OAUTH must be enough along with information pulled from the local Git repository.

  • Local Git Repository
    • When you open a project that was created in Netbeans, the local Git repository is automatically picked up, probably because the local git is stored in `.../YourProjectFolder/.git/`
    • NB: There might be scenarios where the Git repo was not stored in the default location (`.../YourProjectFolder/.git/`) in which case the repo might not get picked up automatically.
  • Re-Authenticate GitHub
    • Click on the GitHub icon on the left of VSCode
    • Click `Sign in`, then `Allow`.
    • Authorize the app on GitHub on the webpage that has just opened i.e. click `Continue`
    • Click  `Authorize Visual-Studio-Code`

      • Most of the stuff on this page is just a warning, you either say yes or no, there are no configurable options here.
    • if you have 2fa you need to `Confirm access`  everyone should have this, just ise whart ever method
       
    • You are now authenticated

      • If the redirect the fails, like mine did, this is what you should do to complete authentication:
        • Keep your browser open.
        • Close VSCode and restarted it.
        • Now go the GitHub icon and click on `Sign in`
        • You should now log in with no more prompts as the authetication has already been completed.
        • Reason: Only the redirect failed, the authetication had already completed.
    • You should now see a panel of stuff rather than a `Sign in` button on the GitHub Panel.
  • Check that the local and remote repositories are in sync
    • Source control graph - Using Git source control in VS Code | Visual Studio Code
      • When you have a remote repository configured, you can see how many commits you are ahead or behind the remote.
      • The Graph section of the Source Control view shows a graphical representation of the commits that are incoming and outgoing.
    • Instructions
      • make sure you have Git Graph installed.
      • Click on `Git Graph` in the status bar.
      • If the repo is out of sync this will be shown.
Existing GitHub Repository
  • Initiate the cloning of the remote Git repo (pick a method):
    • FreeType / Wizard
      • Run the following command from the palette 
        > Git: Clone
        • Or on the welcome page you can click the link "Clone Git Repository..."
      • The following option Clone from GitHub will now appear and you should click on it
      • You will now be given a list of repositories you can click on, usually yours. 
        • However if you start typing a GitHub repo's name, search results from GitHub will appear.
        • It is possible to use the repo's Git definition locator instead of searching/freetyping eg: 
          https://github.com/shoulders/mysql-slow-query-log-visualizer.git
      • Select your desired repository.
    • Direct
      • Running the following command from the palette replacing the URL with your select repository. (notice there is no  > becasue we are using the Git CLI directly) 
        git clone https://github.com/shoulders/mysql-slow-query-log-visualizer.git
        • This can be got from the repo's homepage on Github. Just click on the green "Clone" button.
  • Authenticate as required
    1. Authentication might not occur if you already have permission. If it does, just follow it through.



      • If you are already authenticated with GitHub this tage will not happen.
  • Select the target folder for the cloned repository
    • Whatever folder you select, VSCode will create a folder in their and put the repositories content in it.
    • So you have 2 choices really where to put the files
      1. Projects folder
      2. Workspace folder
  • Open the cloned Repository or add it to the current workspace?

    • Choose "Cancel"
    • This will not affect the files.
    • When you are use to this process/workflow you can use these buttons as needed but for now we will use the easy way.
  • VSCode has now cloned the GitHub repo to your selected target folder
    • Depending on where you put your files you has a couple of steps to do:
      • Projects folder
        • Rename the folder (only if required).
      • Workspace folder
        • A double folder issue has occured using this this method and need fixing.

        • To fix the double folder issue:
          1. Close this workspace and then close VSCode.
          2. Navigate using windows explorer (potentially this can all be done in VSCode)
          3. Move the contents of the folder the Git clone process created up one folder (i.e. to your projects root)
            • Make sure you move all of the hidden files aswell.
          4. Delete the now empty folder
        • Done
  • Re-open the project folder in VSCode
    • Open `.../YourProjectFolder/`in VSCode.
    • All connected and done.
Existing Local Reposotry

Same as "Existing Netbeans Project which has a local Git repositry".

  • Create a repository on GitHub.
  • Open the project folder containing the /.git/ folder in VSCode.
    • VSCode will automatically pickup the Git repo.
  • Connect the local repo to GitHub.
No GitHub or Local Repositories

If you have not already authenticated with GitHub you will be prompted see the Re-Authenticate GitHub section above.

  • Open the `SOURCE CONTROL` tab on the panel (or in the explorer if you have moved it there)
  • You will now see 2 buttons
    • Method 1 (`Initialise Repository`Button)
      • Click `Initialise Repository`
        • There will be no prompts on screen, the Git repo will now be initialised.
        • The `Publish to GitHub` button will dissapear
        • If you have no files in your project:
          • A `Publish Branch` button will appear
          • Skip to `Publish Branch`below.
        • If you have files in your project:
          • The `SOURCE CONTROL` tab will be populated with your files.
          • Commit these these files to your local repository
            • Fill in the `Message` field with `Initial commit`
            • Click `Commit`
            • Because we did not stage the files (you can if you want), you will get this warning, just click Yes.
          • The `Publish Branch` button will now appear.
      • Publish Branch
        • Click `Publish to Branch`
        • The command palette will now open prompting you to select the type of repository (Private or Public) required.

          NB: My GitHub username (shoulders) and the repository name (dns-hijacking-inspector) is already pre-filled
        • The local repository will now be published to GitHub
        • Once complete, your local repository has been published and synced to GitHub.
    • Method 2 (`Publish to GitHub`Button)
      • ... add instructions here when i have done this method...
      • ?? you can skip initialise and just click publish if you want to enable git and publish to github in one go
  • Notes
    • if you intialise first, before publishing, you can see what files wil be commited.
    • How to Publish a Git Repository from VSCode to GitHub | Step-by-Step Guide (2025) - YouTube | Amod Mahajan
      • Learn how to publish your local Git repository to GitHub directly from Visual Studio Code in this easy, step-by-step tutorial. Whether you're a beginner or just want a faster workflow, this guide will walk you through every step—from initializing a Git repo to pushing your code to GitHub using VSCode's GitHub extension.
    • Source Control in VS Code | VSCode
      • You can publish a local repository directly to GitHub with the Publish to GitHub command, which creates a new repository and pushes your commits in one step.
  • Questions
    • This process published to my own user account, how do i publish directly to an organsization, do i manually have to invoke the command?.
      • I could just create repo on GitHub first and then link?
      • There are probably other ways.

Common

Now you have setup your Git, you need to make sure your configurations are in order, whether they need amending or doing from scratch.

Configure Workspace
  • Setup/Re-Configure the Config files in the project folder (as required)
    • Copy your repo template to the workspace folder (optional)
    • Configure .vscode/settings.json as required
    • Configure .editorconfig as required
    • Configure .prettierrc as required (optional)
    • Configure eslint.config.js as required (optional)
    • Configure .gitattributes as required
    • Configure .gitignore as required
  • Completely Protect specific Local folders from EditorConfig
    • The `localonly` and `vendor` folder already have the "unset" rules applied to them in the default .editorconfig above, however if you add new rules of a different type than those currently unset, then you will need to also add the relevant unset rule in the exclude section..
    • If you add a blank root .editorconfig file (see above for the code) to a folder it will completely prevent EditorConfig parsing of this folder.
  • Configure EOL / Line Endings
    • Select your EOL
      • LF is the universal EOL and should be used unless it is a Windows project, in which case the EOL will be CRLF.
      • Only old and specialist systems use CR.
      • Some projects can have a mix of files with different EOL.
      • Rarely, some single files can have mixed EOL but VSCode does not currently support this.
    • How to handle EOL
      • Set EOL on a per project basis.
      • Use EditorConfig to set your EOL, if this is not supported, set them with your editor.
      • Do NOT use Git to convert EOL on submission for any reason.
      • Set VSCode's default EOL for new files to LF. This is not mandatory but makes life easier when working cross platform.
    • Read this for more in-depth information: Line endings when working with Git for Windows and Visual Studio Code | QuantumWarp
Config VSCode
  1. Do you already have a profile that is suitable for this project, then open it. (Optional)
  2. In VSCode open your workspace (i.e. the project folder)
  3. Configure the workspace settings (as required)
  4. Extensions
    1. Install `Recommended Extensions`
    2. Configure as required

Your First Git Commit

Notes

Some things related to your first commit that you will most likely come across.

  • There are no staged changes to commit | Staging Area (Stash)
    • When you encounter the message "There are no staged changes to commit" in Git, it means that you attempted to create a commit without having any changes staged. The staging area is where you prepare changes before committing them to the repository.
    • I think a stash is just a staging area where you can put files you want to commit and then go back to work on the code.
    • The files in the stash are copies of files at the point in time when they were commited to the stash.
    • This feature allow to carry on workign with your code and not worry about chaning files that you have not commit their changes yet.
    • Git Changes Not Staged for Commit: A Quick Guide - Discover what to do when you encounter git changes not staged for commit. This concise guide helps you master your workflow effortlessly.
    • How to resolve the Git message "There are no staged changes to commit" - This guide explains how to handle the Git message "There are no staged changes to commit." Learn step-by-step solutions to identify and fix this issue in your workflow.
  • Further reading
    • Introduction to Git in VS Code | Visual Studio Code - Get started with Git in Visual Studio Code and take control of your code! Our beginner's guide covers everything you need to know, from setting up a repository to committing changes and collaborating with others. Learn Git today and streamline your development workflow.

npm Packages

  • An npm initialised project is a prerequisite for installing any packages locally. You can check this by the presence of a package.json .
  • All of these commands should be run from terminal in your project folder.
  • Some npm packages can be installed globally but it is always recommended for you to install them locally where possible which is what we are going to do here.
  • Installing locally allows you to specify package versions and the ability to share these configurations to you colleagues via the projects package.json.
  • To use these in VSCode usually requires a VSCode extension.

ESLint

  • It is possible to add ESLint configurations directly to your package.json file.
  • ESLint should not be installed globally, it is pointless with the new Flat Config system
  • ESLint is intended to be used on a per project basis, not globally.
  • When I make changes to the eslint.config.mjs the server responds/updates with the new config.
  • When I install a new npm package, the ESLint server does not restart, you have to do this manually.

Install ESLint

  • Install the VSCode extension
  • Install the NPM package
    • Run this command in the terminal 
      npm install --save-dev eslint

or

npm i -D eslint
    • This installs the ESLint software that does the work.
    • The commands above are the same, except one is a shorthand version.
    • --save-dev / -D switches install the ESLint package as a dependency so it is only used in the development of your project and is not present or required for your final software (i.e. production).
  • Initialise ESLint
    • Run this command in the terminal, and answer the questions so the Linter can configure itself (you can always re-run this if you make a mistake). 
      npx eslint --init
      • Need to install the following packages:
        Need to install the following packages:
eslint@9.28.0
Ok to proceed? (y)
        • = Yes
      • What do you want to lint?
        • = `JavaScript, JSON, JSON with comments, JSON5, Markdown CSS`
        • Pick the languages you want to lint, but for this example we will use those above.
        • Use the space bar and arrow keys to select your required languages.
      • How would you like to use ESLint?
        • = `To check syntax and find problems`
      • What type of modules does your project use?
        • = `JavaScript modules (import/export)`
      • Which framework does your project use?
        • = `None of these`
      • Does your project use TypeScript?
        • = `Yes`
        • When you need typescript, you can probably figure out how to add this.
        • When you need Typescript, you can probably figure out how to add this later or just enable it now if required.
        • If you select yes, have JavaScript as a language to be installed, and select JavaScript for the config file type, then TypeScript is added to the JS Files: declaration line and a tseslint.configs.recommended rules declaration line is added immediately below. No other files or packages are required so you can just amend and add lines as shown below. I have added it here for reference only as I was curious what was the difference.
      • Where does your code run?
        • = `Browser, Node`
        • Pick all the locations your code will run.
        • If you are developing JavaScript then it it will be run in the browser which is Client-Side.
        • `Node` is for projects that run Server-Side in NodeJS.
      • Which language do you want your configuration file to be written in?
        • = `JavaScript`
        • Options = `JavaScript` or `TypeScript`
        • This question only appears if you said earlier that your project uses TypeScript.
      • What flavour of Markdown do you want to lint?
        • = `GitHub Flavoured Markdown`
        • GitHub uses a slightly modified Markdown but I am going to use this becasue I will be using GitHub for all of my repositories.
        • This option only appears if you have selected Markdown as a language to install above.
      • Would you like to install them now? 
        The config that you've selected requires the following dependencies:

eslint, @eslint/js, globals, typescript-eslint, @eslint/json, @eslint/markdown, @eslint/css
        • = `Yes`
        • Without these packages, ESLint will not work
        • These files will be installed in to the folder /node_modules/ in your project folder. If it does not exist, it will be created.
        • This will re-install the eslint core files you have just installed. In fact you do not need to re-install this package but it is going to be as part of this wizard but it will not harm or change anything.
        • The reason you are prompted with this is because:
          • Makes it easier to install.
          • ESLint should be installed locally to work properly.
          • The Flat Config cannot handle globals and tehrefore ESLint needs all of the packages it references local when using this new config method.
          • ESLint has made a shift to only supporting local installs as this is a better programming paradigm.
          • This prompt is also to encourage and make it easier for users to start using locally instead of global. Some user will still have ESLint installed globally so they can use eslint --init whereas they should be using npx eslint --init which does not need the eslint package to be installed globally.
      • Which package manager do you want to use?
        • = `npm`
        • This is what we used to install ESLint, so this question is present to handle alternative install routes.
  • Config file created
    • This has now created the eslint.config.mjs file in your project root using the answers just given above.
    • See this example: 
      import js from "@eslint/js";
import globals from "globals";
import tseslint from "typescript-eslint";
import json from "@eslint/json";
import markdown from "@eslint/markdown";
import css from "@eslint/css";
import { defineConfig } from "eslint/config";

export default defineConfig([
  { files: ["**/*.{js,mjs,cjs,ts,mts,cts}"], plugins: { js }, extends: ["js/recommended"], languageOptions: { globals: {...globals.browser, ...globals.node} } },
  tseslint.configs.recommended,
  { files: ["**/*.json"], plugins: { json }, language: "json/json", extends: ["json/recommended"] },
  { files: ["**/*.jsonc"], plugins: { json }, language: "json/jsonc", extends: ["json/recommended"] },
  { files: ["**/*.json5"], plugins: { json }, language: "json/json5", extends: ["json/recommended"] },
  { files: ["**/*.md"], plugins: { markdown }, language: "markdown/gfm", extends: ["markdown/recommended"] },
  { files: ["**/*.css"], plugins: { css }, language: "css/css", extends: ["css/recommended"] },
]);
  • Restart VSCode
    • This should not be needed, but for the purpose of this tutorial it will not harm.
  • Test ESLint is working.
    • You can test this by creating a testme.js file in your project and typing some errors into it.
    • ESLint errors are shown in the `PROBLEMS` tab in the `Panel`.
    • The `OUTPUT`will show system commands to and from the ESLint Server including starting up notifications.
      • Make sure you select `ESLint` from the drop down to see these messages.

html-eslint (ESlint Plugin)

  • ESlint installed and configured correctly is a prerequisite.
  • html-eslint
    • Find and fix problems in your HTML code
    • In addition to standalone HTML files, html-eslint also supports linting HTML inside JavaScript and TypeScript template literals.
  • @html-eslint/eslint-plugin - npm
    • An ESLint plugin which provides linting rules for HTML.
  • Install the NPM package
    • Run this command in the terminal
      npm install --save-dev @html-eslint/parser @html-eslint/eslint-plugin
  • Edit the projects eslint.config.mjs
    • Add this import statement (just above import { defineConfig } from "eslint/config"); 
      import html from "@html-eslint/eslint-plugin";
    • Add a files: declaration at the end of the export block. Pick one from below. They both do the same but the second one is laid out differently with a rule override/declaration. 
      { files: ["**/*.html"], plugins: { html }, language: "html/html", extends: ["html/recommended"] },

or

{
  files: ["**/*.html"],
  plugins: { html, },
  language: "html/html",
  extends: ["html/recommended"],
  rules: {
    "html/no-duplicate-class": "error",
  }
},
    • You can remove the extends: statement if you do not want to use the default HTML ruleset.
  • Lint HTML code inside JavaScript Template Literals
    • Add a files: declaration at the end of the export block. Pick one from below. They both do the same but the second one is laid out differently with a rule override/declaration.  
      { files: ["**/*.js", "**/*.ts"], plugins: { html }, extends: ["html/recommended"] },

or

{
  files: ["**/*.js", "**/*.ts"],
  plugins: {
      html,
  },
  extends: ["html/recommended"],
  rules: {
      "html/require-img-alt": "error",
  },
},
      • You can remove the extends: statement if you do not want to use the default HTML ruleset.
  • VSCode Settings
    • This HTML language plugin requires no further settings for it to be enabled. This can't be said for all ESLint plugins. Upon examining the defaultSettings.json I found the following setting which shows what languages VSCode and the ESLint extension will automatically lint by default. For reference I do not see CSS, so either this is an oversight and needs adding or is not required for activation. 
      // An array of language ids for which the extension should probe if support is installed.
"eslint.probe": [
    "astro",
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "html",
    "mdx",
    "vue",
    "markdown",
    "json",
    "jsonc"
]
  • Restart VSCode
    • This might not be needed, but does not harm.
    • Done

eslint-plugin-html (ESlint Plugin)

  • Not currently added to flat config below because I cannot get it to work. I think the package has to be updated to support 'Flat Config'.
  • Example Flat config, only eslint-plugin-html 
    export default [
  {
    files: ["**/*.html", "**/*.we"],
    plugins: { html },
    settings: {
      "html/html-extensions": [".html", ".we"], // consider .html and .we files as HTML
    },
  },
]
    • Note: you need to specify extensions twice, which is not ideal. This should be improved in the future.
  • Incompatibility issue between `eslint-plugin-html` and `@html-eslint` · Issue #293 · BenoitZugmeyer/eslint-plugin-html · GitHub
    • Q: According to the documentation, eslint-plugin-html should be compatible with @html-eslint. However, when I tried using both in my project, I noticed that eslint-plugin-html stops working. It seems like the issue is caused by @html-eslint/parser.
    • A: You need both the @html-eslint/parser and @html-eslint/eslint-plugin to make it work. Eg: 
      import html from "eslint-plugin-html"
import htmlEslint from '@html-eslint/eslint-plugin'
import PARSER_HTML from '@html-eslint/parser'

export default [
  {
    files: ["**/*.html"],
    plugins: {
      html,
      "@html-eslint": htmlEslint,
    },
    languageOptions: {
      parser: PARSER_HTML
    },
    rules: {
      'no-console': 2
    }
  }
]

 

  • ESlint installed and configured correctly is a prerequisite.
  • GitHub - BenoitZugmeyer/eslint-plugin-html
    • An ESLint plugin to extract and lint scripts from HTML files. - BenoitZugmeyer/eslint-plugin-html
    • This plugin focuses on applying ESLint rules on inline scripts contained in HTML. It does not provide any rule related to HTML. For that, you can use other plugins like @eslint-html or @angular-eslint. eslint-plugin-html is compatible with those plugins and can be used along them.
  • eslint-plugin-html - npm - A ESLint plugin to lint and fix inline scripts contained in HTML files.
  • Deprecation: For modern projects, it's recommended to use html-eslint, which supports linting standalone HTML files and HTML embedded in JavaScript/TypeScript template literals.
  • Recommended Alternative: html-eslint
  • This plugin:
    • It does not ship with any “rulesets” (like plugin:html/recommended).
    • The only thing it provides is the parser/extractor and some settings (html/indent, html/report-bad-indent, etc.).
    • So there’s nothing from this plugin to extend.
  • Uses the standard ESLint rules: Rules Reference - ESLint
  • Run the following terminal command to install the npm package 
    npm install --save-dev eslint-plugin-html
  • Edit the eslint.config.mjs
    • Add this import statement (just above import { defineConfig } from "eslint/config"); 
      import html from "eslint-plugin-html";
    • Add a files: declaration at the end of the others. Pick one from below as they both do the same (see their comments) 
      // This matches the other rule's format for easy of use.
{ files: ["**/*.html"], plugins: { htmlscripts } },

or

// This version is the same as above with the addtion of an example setting/override.
{
  files: ["**/*.html"],
  plugins: { htmlscripts, },
  settings: {
    "html/report-bad-indent": "error", // warn if encounter a problematic indentation
  }
},
  • VSCode Settings
    • This HTML language plugin requires no further settings for it to be enabled. This can't be said for all ESLint plugins.
  • Check the plugin is working
    • Using the no-console rule as in the examples above.
    • Due to a bug, the following code will no sho the no-console error, it gets stuck on the var declaration. 
      <!doctype html>
<html>
    <head>
    </head>
    <body>
      <script>
        var 51;
        console.log("chicken");
      </script>
    </body>
</html>
    • The corrected code below will show an error corectly due to the presences of the console.log() statement. 
      <!doctype html>
<html>
    <head>
    </head>
    <body>
      <script>
        abc = 51;
        console.log("chicken");
      </script>
    </body>
</html>
  • Restart VSCode
    • Done

ESLint Stylistic

I have not added this but it seems it could be useful

ESLint Flat Config example (ESLint v9.00+ with extends)

I have included this here because there are no examples that I could find on the internet for VSCode, ESLint and ESLint-HTML.

What this configuration does:

  • Lints TypeScript, Javascript, JSON, JSONC, JSON5, MD, CSS, HTML files. (ESLint)
  • Lints HTML files. (html-eslint)
  • Lint HTML code inside JavaScript Template Literals (html-eslint)
  • Lints inline Javascript in HTML files. (eslint-plugin-html). Not added and not currently working, see notes above.

Using the instructions above this is what your completed eslint.config.mjs should look like. Alter and use as required.

import js from "@eslint/js";
import globals from "globals";
import tseslint from "typescript-eslint";
import json from "@eslint/json";
import markdown from "@eslint/markdown";
import css from "@eslint/css";
import html from "@html-eslint/eslint-plugin";
import { defineConfig } from "eslint/config";

export default defineConfig([

  // ESLint Core
  { files: ["**/*.{js,mjs,cjs,ts,mts,cts}"], plugins: { js }, extends: ["js/recommended"], languageOptions: { globals: {...globals.browser, ...globals.node} } },
  tseslint.configs.recommended,
  { files: ["**/*.json"], plugins: { json }, language: "json/json", extends: ["json/recommended"] },
  { files: ["**/*.jsonc"], plugins: { json }, language: "json/jsonc", extends: ["json/recommended"] },
  { files: ["**/*.json5"], plugins: { json }, language: "json/json5", extends: ["json/recommended"] },
  { files: ["**/*.md"], plugins: { markdown }, language: "markdown/gfm", extends: ["markdown/recommended"] },
  { files: ["**/*.css"], plugins: { css }, language: "css/css", extends: ["css/recommended"] },

  // html-eslint
  { files: ["**/*.html"], plugins: { html }, language: "html/html", extends: ["html/recommended"] },
  { files: ["**/*.js", "**/*.ts"], plugins: { html }, extends: ["html/recommended"] },

]);

Notes 

  • Installing the ESLint Package
    • eslint - npm - Package page for ESLint on npmjs.com
    • For VSCode use this command from the command line (assumes NPM and NodeJS packages are installed). Do not install globally. 
      npm install eslint
    • Getting Started with ESLint | ESLint
      • Lists commands to use in various scenarios 
        npm init @eslint/config@latest
      • It is also possible to install ESLint globally, rather than locally, using npm install eslint --global. However, this is not recommended, and any plugins or shareable configs that you use must still be installed locally if you install ESLint globally.
  • Websites
    • ESLint - Pluggable JavaScript Linter
      • A pluggable and configurable linter tool for identifying and reporting on patterns in JavaScript.
      • The pluggable linting utility for JavaScript and JSX.
    • ESLint Code Explorer
      • Code Explorer is designed to help developers explore and understand source code to aid in the creation of custom ESLint rules. Each language supported by Code Explorer exposes the same information that ESLint rules have access to.
      • At a minimum, each language displays the AST for any code that is entered into the editor. You can toggle different parser settings for each language to see how that affects the AST. For JavaScript, you also get to see scope and code path information.
    • ESLint | GitHub - Official repository.
    • eslint/eslint · Discussions · GitHub
      • Explore the GitHub Discussions forum for eslint eslint. Discuss code, ask questions & collaborate with the developer community.
      • This is the official forum
    • ESLint Playground - ESLint - Pluggable JavaScript Linter - Experiment with ESLint rules and your files with this playground.
    • html-eslint Playground - Find and fix problems in your HTML code using this online ESLint-HTML playground. Useful for testing rules.
    • Rules Reference - ESLint
    • Command Line Interface Reference - ESLint - You can put your ESLint project configuration in a configuration file. You can include built-in rules, how you want them enforced, plugins with custom rules, shareable configurations, which files you want rules to apply to, and more.
    • Configuration Files - ESLint
  • General
    • What is the difference between .js, .tsx and .jsx in React? | Stack Overflow
    • Languages Property | ESLint
      • Starting with ESLint v9.7.0, you can extend ESLint with additional languages through plugins.
      • While ESLint began as a linter strictly for JavaScript, the ESLint core is generic and can be used to lint any programming language.
      • Each language is defined as an object that contains all of the parsing, evaluating, and traversal functionality required to lint a file.
      • These languages are then distributed in plugins for use in user configurations.
  • eslint.config.js or eslint.config.mjs - Which should I use?
    • When you run install ESLint using my instructions, an eslint.config.mjs is created. I am not an expert so I am going to use this file name for my config.
    • Configuration Files - ESLint
      • If your project does not specify "type":"module" in its package.json file, then eslint.config.js must be in CommonJS format, else if specified then ECMAScript modules (ESM) format.
      • eslint.config.mjs files expect the content to be in ECMAScript modules (ESM) format.
      • eslint.config.cjs files expects the content to be in CommonJS format.
    • Docs: `eslint.config.js` vs `eslint.config.mjs` - which one should i use? · Issue #20129 · eslint/eslint · GitHub
      • DMartens
        • Hi, the use of the file extension is only to mark the file as a module allowing import and export.
        • An alternative to mark all files as a module is to set type: "module" in the package.json.
        • In other words you do not need to use .mjs to use modules and I think the modern way is to always use type: "module" so that all files in the project are seen as modules.
        • For more information you can have a look at the Node.js documentation for this.
        • But this is not specific to ESLint but to all npm packages.
        • I checked the configuration files documentation and the .mjs file extension is only for the file precedence and which files are linted by default.
        • The supported way is to use npx @eslint/create-config@latest to create the configuration file, which uses the type of the package.json file to determine the file extension of the configuration file.
      • shoulders
        • From what I understand is that ECMAScript Modules (ESM) is the preferred option on modern projects and will eventually replace CommonJS.
      • DMartens
        • The config creator (npx @eslint/create-config@latest) uses the type field of the package.json file to determine the file extension of the configuration file.
        • With the new configuration format it defaults to parse .js and .mjs files as ESM and CommonJS for .cjs files.
      • My Takeaway
        • eslint.config.js is by default parsed as ECM but this can be changed to CommonJS by setting the type in the package.json.
        • eslint.config.mjs is always parsed as ECM.
        • eslint.config.cjs is always parsed as CommonJS.
        • npx eslint --init by default creates a eslint.config.mjs file.
    • Enabling - Modules: ECMAScript modules | Node.js v24.8.0 Documentation
      • Node.js has two module systems: CommonJS modules and ECMAScript modules.
      • Authors can tell Node.js to interpret JavaScript as an ES module via the .mjs file extension, the package.json "type" field with a value "module", or the --input-type flag with a value of "module". These are explicit markers of code being intended to run as an ES module.
      • Inversely, authors can explicitly tell Node.js to interpret JavaScript as CommonJS via the .cjs file extension, the package.json "type" field with a value "commonjs", or the --input-type flag with a value of "commonjs".
      • When code lacks explicit markers for either module system, Node.js will inspect the source code of a module to look for ES module syntax. If such syntax is found, Node.js will run the code as an ES module; otherwise it will run the module as CommonJS. See Determining module system for more details.
  • Multi-root Workspaces (Working with ESLint)
  • Tools
  • CommonJS Modules (CJS) vs. ECMAScript Modules (ESM)
    • From a Bing Search
      • Both CommonJS (CJS) and ECMAScript Modules (ESM) are systems for organizing and reusing JavaScript code, but they differ in syntax, behavior, and use cases. Here's a concise comparison:
      • Key Points 
        • Syntax
          • CommonJS (CJS):
            • Uses require() to import modules.
            • Uses module.exports or exports to export modules.
            • Example 
              // Import
const fs = require('fs');

// Export
module.exports = { myFunction };
          • ECMAScript Modules (ESM):
            • Uses import and export keywords.
            • Example 
              // Import
import fs from 'fs';

// Export
export const myFunction = () => {};
        • Default Support
          • CJS: Default in Node.js (prior to version 12). No configuration needed.
          • ESM: Native in modern JavaScript (ES6+). Requires "type": "module" in package.json or .mjs file extension in Node.js.
        • Loading Behaviour
          • CJS: Synchronous loading (blocking). Suitable for server-side environments.
          • ESM: Asynchronous loading (non-blocking). Better for client-side and modern applications.
        • Compatability
          • CJS: Works seamlessly with older Node.js versions and libraries.
          • ESM: Requires modern environments or transpilers (e.g., Babel) for backward compatibility.
        • Use Cases
          • CJS: Ideal for legacy projects or when working with older Node.js libraries.
          • ESM: Recommended for modern JavaScript projects, especially when targeting browsers or using tree-shaking for optimization.
        • Key Takeaway
          • Use CJS for backward compatibility or legacy projects.
          • Use ESM for modern, forward-looking projects to leverage the latest JavaScript features.
    • CommonJS vs. ES modules in Node.js - LogRocket Blog
      • Explore the differences between CommonJS and ES modules in Node.js, exploring how they handle JavaScript modules, their syntax, and more.
      • The ES module format was introduced in Node.js v8.5.0 as the JavaScript module system was standardized.
    • Understanding CommonJS vs. ES Modules in JavaScript | by Jollen Moyani | Syncfusion | Medium - This blog compares two pivotal module systems in JavaScript, CommonJS and ES Modules, with code examples.
    • CommonJS (CJS) vs ECMAScript Modules (ESM) in JavaScript - DEV Community - JavaScript modules play a crucial role in organising code, enhancing reusability, and improving maintainability of applications. Two primary module systems widely used are CommonJS (CJS) and ECMAScript Modules (ESM). Understanding their differences and capabilities is key to effectively leveraging them in your projects.
    • CommonJS vs ECMAScript Modules (ESM). Choosing the Right Module System for Your JavaScript Project | by Eduard Koshkelyan | Stackademic - Explore CommonJS vs. ECMAScript Modules (ESM) in JavaScript. Choose the right module system to enhance code efficiency and performance.
    • CommonJS vs. ES Modules | Better Stack Community
      • CommonJS (CJS) and ECMAScript Modules (ESM) have coexisted for years, causing confusion and technical headaches. Their split has led to compatibility issues, inconsistent tooling, and frustrating workarounds.
      • You’ve likely dealt with libraries that support only one format, leading to mismatched imports, runtime errors, and complex build setups. Even within Node.js, interoperability remains a challenge.
      • This article breaks down the differences between CJS and ESM, giving you a clear understanding of when and how to use each module system—without the headaches.
  • Tutorials
  • Plugins (Official)
    • @eslint/js
      • The beginnings of separating out JavaScript-specific functionality from ESLint.
    • @html-eslint/eslint-plugin
      • This plugin provides a comprehensive set of linting rules for HTML, supporting both standalone .html files and HTML within JavaScript template literals.
      • html-eslint | Homepage
        • Find and fix problems in your HTML code
        • Lots of code examples
      • GitHub - yeonjuan/html-eslint - An ESLint plugin for linting HTML files and HTML in JavaScript Template Literals
      • ESLint can now lint HTML using the html-eslint language plugin - ESLint - Pluggable JavaScript Linter - Bringing HTML linting to ESLint’s new language-agnostic system. 
        • In 2024, ESLint announced its plan to become a language-agnostic linter that is capable of linting languages other than JavaScript. Since then, we’ve seen official support added for JSON and Markdown, and most recently, CSS. Today, I’m excited to share that html-eslint now provides an ESLint language plugin for linting HTML.
      • getting-started - html-eslint - How to get started making your own configuration file.
    • @eslint/css
      • This package contains a plugin that allows you to natively lint CSS files using ESLint.
    • @eslint/markdown
      • Lint JS, JSX, TypeScript, and more inside Markdown.
    • @eslint/json
      • This package contains a plugin that allows you to natively lint JSON and JSONC files using ESLint.
  • Plugins (3rd Party)
    • GitHub - dustinspecker/awesome-eslint - A list of awesome ESLint plugins, configs, etc.
    • eslint-plugin-html
      • A ESLint plugin to lint and fix inline scripts contained in HTML files.
      • This plugin focuses on applying ESLint rules on inline scripts contained in HTML. It does not provide any rule related to HTML. For that, you can use other plugins like @eslint-html or @angular-eslint. eslint-plugin-html is compatible with those plugins and can be used along them.
  • Documentation (v9.0.0)
    • using ESLint 9 + neostandard with vscode and zed | Martin's Blog - how to set up ESLint with neostandard for code formatting and fixing in vscode and zed
      • eslint.config.js example
      • Formatting on save
      • Using the "format document" command
      • Extension recommendation (.vscode/extensions.json)
    • Configure ESLint | ESLint - ESLint is designed to be flexible and configurable for your use case. You can turn off every rule and run only with basic syntax validation or mix and match the bundled rules and your custom rules to fit the needs of your project.
  • Flat config (v9.0.0+) (eslint.config.mjs  / eslint.config.js)
    • .eslintrc, eslintrc.json and other variations of these ESLint config files have been deprecated in ESLint v9.0.0 in favour of a new format and a new file name eslint.config.js which is using a "flat style" config.
    • ESLint's new config system, Part 1: Background | ESLint
      • ESLint's config system started out fairly simple back in 2013. Since that time it has grown more complex and it's time for a change.
    • ESLint's new config system, Part 2: Introduction to flat config | ESLint
      • ESLint's new config system, nicknamed flat config, is designed to be both familiar and much simpler than the original config system.
    • Flat config rollout plans | ESLint
      • When ESLint v9.0.0 is released, either the end of this year or beginning of next year, flat config will be the default configuration system and we will deprecate, but not remove, eslintrc.
      • New features will be added only for flat config, so we encourage everyone to move off of eslintrc as quickly as possible to take advantage of everything v9.0.0 will offer.
    • The new config file: eslint.config.js - ESLint's new config system, Part 2: Introduction to flat config | ESLint
      • Each config object can have optional files and ignores keys specifying minimatch-based glob patterns to match files.
    • A Flat Attempt at the ESLint Flat Config | by Naman Dhingra | Medium
      • While upgrading to ESLint v9, I encountered several challenges related to compatibility and plugin integration that weren’t immediately obvious.
      • ESLint 9 introduces a new way of configuring your linter called the flat config. Unlike the traditional .eslintrc files, the flat config uses a flat array of configuration objects and leverages ECMAScript modules.
      • Note: If your project uses ECMAScript modules (ESM) but does not specify "type": "module" in your package.json, you should rename your ESLint configuration file to use the .mjs extension (e.g., eslint.config.mjs). Alternatively, if you add "type": "module" to your package.json, you can keep using the .js extension for your ESLint config file while still using ESM syntax.
    • Configure Plugins | ESLint - You can extend ESLint with plugins in a variety of different ways.
    • Configuration Files | ESLint
      • You can put your ESLint project configuration in a configuration file. You can include built-in rules, how you want them enforced, plugins with custom rules, shareable configurations, which files you want rules to apply to, and more.
      • Configuration File
        • In this example, the defineConfig() helper is used to define a configuration array with just one configuration object.
        • The configuration object enables two rules: semi and prefer-const. These rules are applied to all of the files ESLint processes using this config file.
      • Configuration Objects
        • Each configuration object contains all of the information ESLint needs to execute on a set of files. Each configuration object is made up of these properties:
        • These are the options you can use when defining your configuration.
        • Name
          • A name for the configuration object. This is used in error messages and config inspector to help identify which configuration object is being used. (Naming Convention)
          • The name property is optional, but it is recommended to provide a name for each configuration object, especially when you are creating shared configurations. The name is used in error messages and the config inspector to help identify which configuration object is being used.
          • The name should be descriptive of the configuration object’s purpose and scoped with the configuration name or plugin name using / as a separator. ESLint does not enforce the names to be unique at runtime, but it is recommended that unique names be set to avoid confusion.
          • This link shows an example of a rule set that you can import.
      • Specifying files and ignores
        • Configuration object should apply to and which not. Here’s an example:
        • Configuration objects without files or ignores are automatically applied to any file that is matched by any other configuration object. For example:
        • Important: By default, ESLint lints files that match the patterns **/*.js, **/*.cjs, and **/*.mjs. Those files are always matched unless you explicitly exclude them using global ignores. 
          ## Equivalent to:
files: ["**/*.js", "**/*.cjs", "**.*.mjs"],
        • Globally ignoring files with ignores
          • Depending on how the ignores property is used, it can behave as non-global ignores or as global ignores.
            • When ignores is used without any other keys (besides name) in the configuration object, then the patterns act as global ignores. This means they apply to every configuration object (not only to the configuration object in which it is defined). Global ignores allows you not to have to copy and keep the ignores property synchronized in more than one configuration object.
            • If ignores is used with other properties in the same configuration object, then the patterns act as non-global ignores. This way ignores applies only to the configuration object in which it is defined.
          • Global and non-global ignores have some usage differences:
            • patterns in non-global ignores only match the files (dir/filename.js) or files within directories (dir/**)
            • patterns in global ignores can match directories (dir/) in addition to the patterns that non-global ignores supports.
          • For all uses of ignores:
            • The patterns you define are added after the default ESLint patterns, which are ["**/node_modules/", ".git/"].
            • The patterns always match files and directories that begin with a dot, such as .foo.js or .fixtures, unless those files are explicitly ignored. The only dot directory ignored by default is .git.
            • To avoid confusion, use the globalIgnores() helper function to clearly indicate which ignores are meant to be global. Here’s the previous example rewritten to use globalIgnores():
      • Cascading Configuration Objects - When more than one configuration object matches a given filename, the configuration objects are merged with later objects overriding previous objects when there is a conflict.
    • Configuration Migration Guide | ESLint
      • This guide provides an overview of how you can migrate your ESLint configuration file from the eslintrc format (typically configured in .eslintrc.js or .eslintrc.json files) to the new flat config format (typically configured in an eslint.config.js file).
    • Migrate to v9.x | ESLint
      • ESLint v9.0.0 is a major release of ESLint, and as such, has several breaking changes that you need to be aware of. This guide is intended to walk you through the breaking changes.
      • New default config format (eslint.config.js)
        • As announced in our blog post, in ESLint v9.0.0, eslint.config.js is the new default configuration format. The previous format, eslintrc, is now deprecated and will not automatically be searched for.
        • In case you still need to use the deprecated eslintrc config format, set environment variable ESLINT_USE_FLAT_CONFIG to false.
    • Essential Guide to Migration to ESLint v9: Best Practices - Navigate the migration to ESLint v9 with essential tips.
    • New ESLint flat config file format example - DEV Community
      • An example of a working config of the new ESLint format for a project with React and Typescript.
    • Evolving flat config with extends | ESLint - Your eslint.config.js files can now use extends to simplify your configuration.
      • defineConfig() Helper
        • The defineConfig() function is exported from the eslint/config entrypoint and can be used like this:
        • You get type safety through the type definitions for defineConfig(), making it easier to ensure the correctness of your configuration using TypeScript.
        • The defineConfig() function also automatically flattens all of its arguments, meaning you can nest objects and arrays:
        • This flattening behavior is designed to eliminate some of the confusion we heard around the use of the spread operator (...) with the new configuration system. With defineConfig(), you never need to use the spread operator (unless you really want to!).
        • Config Intellisense - Command Line Interface | Rollup
          • Alternatively you can use the defineConfig helper, which should provide Intellisense without the need for JSDoc annotations:
        • Understanding the Difference: .ts vs. .tsx Explained
          • Understand the nuanced differences between ts vs. tsx files.
          • As a superset of JavaScript, TypeScript introduces type safety and static typing, transforming how you write code. Using TypeScript files (with a .ts file extension) enables a level of type-checking that JavaScript alone cannot offer. This helps catch errors early in the development process and significantly improves your code's maintainability and readability.
      • globalIgnores() helper
        • When ignores is in an object by itself, then it acts as global ignores; when there is something else in the object, then it acts as local ignores. It proved to be difficult to make changes to this behavior without breaking a lot of existing configurations, so we opted to add a new globalIgnores() helper function to make the behavior explicit:
        • You can read more about the globalIgnores() function in the ignoring files documentation
      • Bringing back extends
        • The original theory of flat config was that extends was just an abstraction over a one-dimensional array of configuration objects, and was therefore not needed if we gave people access to that one-dimensional array. While many enjoyed the freedom to mix and match configurations using JavaScript, it turned out that a lot of users also found extending other configurations frustrating. One pointed criticism is that they never knew how to extend another configuration because some were objects, some were arrays, and not all plugins exposed their flat configs the same way. Here’s an example:
        • This approach was difficult for JavaScript beginners to understand and frustrating for experienced developers who had to figure out how to apply this technique to large configuration files.
        • Ultimately, we realized that the best way to solve this set of problems was to reintroduce extends. The defineConfig() function allows you to specify an extends array in any object, and that array can contain objects, arrays, or strings (for plugin configs that follow the recommended approach). This allows you to rewrite your configuration file in a more consistent way:
      • Conclusion
        • By introducing defineConfig(), we’ve made it easier to write type-safe configurations while also simplifying the way nested configurations are handled.
        • The reintroduction of extends brings back a familiar and powerful way to compose configurations, addressing one of the most common pain points reported by our users.
        • With the addition of the globalIgnores() helper, we’ve clarified one of the most confusing aspects of the configuration system by making global ignore patterns more explicit.
        • Together, these changes create a more intuitive and user-friendly configuration experience that maintains the power and flexibility of the flat config system.
    • Combine Configs - ESLint - Pluggable JavaScript Linter
      • In many cases, you won’t write an ESLint config file from scratch, but rather, you’ll use a combination of predefined and shareable configs along with your own overrides to create the config for your project. This page explains some of the patterns you can use to combine configs in your configuration file.
      • Apply a Config Object
        • If you are importing an object from another module, in most cases, you can just pass the object directly to the defineConfig() helper. For example, you can use the recommended rule configurations for JavaScript by importing the recommended config and using it in your array:
      • Apply a Config Array
        • If you are importing an array from another module, pass the array directly to the defineConfig() helper. Here’s an example:
      • NB: You can import a plugin once and use it in multiple rules with different modifications applied.
    • ESLint 9 Flat config tutorial - DEV Community
      • That is because, before ESLint 9, it had many conflicts between IDE/Editor, prettier, and ESLint. Now ESLint9 disabled & deprecated some confict rules, and enabled Flat config as default.
      • Even this tutorial is partly out of date because it does not account for defineConfig()
    • What's New in ESLint 9.0. | by Onix React | Medium
      • ESLint has experienced a significant overhaul with the release of version 9.0.0, bringing a lot of enhancements and novel features.
      • Even this tutorial is partly out of date because it does not account for defineConfig()
    • ESLint now officially supports linting of CSS | ESLint
      • Taking our next step towards providing a language-agnostic platform for source code linting.  
      • Back in July of 2024 we announced our plan to make ESLint a more general-purpose linter that is capable of linting any language. In October 2024, we announced linting support for JSON and Markdown, delivering on that vision. Today, we’re excited to add to the list of supported languages with the introduction of CSS support.
    • ESLint v9.0.0 released | ESLint
      • We just pushed ESLint v9.0.0, which is a major release upgrade of ESLint.
      • This release also has some breaking changes, so please read the following closely.
      • Flat config is now the default and has some changes.
    • ESLint v9.22.0 released | ESLint
      • This release introduces the defineConfig() and globalIgnores() helpers for configuration files.

Prettier

  • You can add Prettier configurations directly to your package.json file.
  • It is optional, but recommended, to install the prettier npm package when using the VSCode extension.
  • You can install prettier globally. This is useful for small projects, there is just you, and where you do not need to share your Prettier version between colleagues.
  • Install the VSCode extension
    • Prettier - Code formatter - Visual Studio Marketplace
      • This is not the actual software, but just an extension so it can be used in VSCode.
      • This extension will use prettier from your project's local dependencies (recommended).
      • When the prettier.resolveGlobalModules is set to true the extension can also attempt to resolve global modules.
      • Should prettier not be installed locally with your project's dependencies or globally on the machine, the version of prettier that is bundled with the extension will be used.
  • Install the NPM package
    • Run this command in the terminal 
      npm install prettier --save-dev --save-exact
      • This installs the actual software that does the work.
      • It is recommend to install prettier locally in your project and pin its version.
  • Configure Prettier and ESLint to work together (only needed if both extensions are installed)
    • Run this command in the terminal 
      npm install --save-dev eslint-config-prettier eslint-plugin-prettier
  • Intitialise Prettier
    • Create a blank file in the root of your project called .prettierrc if you want to specify rule overrides.
    • There is nothing else to do.

VSCode Extensions

General

  • You can install extensions globally or in a workspace.
  • Extension Marketplace - Discover, add, update, disable and uninstall Visual Studio Code extensions (plug-ins) through the Extension Marketplace.
  • Where are extensions installed - Extension Marketplace | Visual Studio Code
    • Extensions are installed in a per user extensions folder. Depending on your platform, the location is in the following folder:
      • Windows %USERPROFILE%\.vscode\extensions
      • macOS ~.vscode/extensions
      • Linux ~.vscode/extensions
    • In these folders you will also find
      • extensions.json - Global list of installed extensions
      • .obsolete - I am not 100% about this file's purpose
    • An example Windows location. 
      C:\Users\{username}\.vscode\extensions\bmewburn.vscode-intelephense-client-1.16.3
  • Best practice for installed extensions
    • Globally Install all of the extensions you will need for all of your project
    • Disable all of the extensions globally, except thise that you want on globally such as GIT hitstory and your preferred theme etc...
    • Enable the required extensions per workspace/project
    • This keeps extension bloat down but you have all of the required extensions available when required.
  • You can make a profile with specific extensions e.g. for PHP, do the following:
    • Create a profile called PHP
    • In the profile only enable the PHP extensions required
    • You can now assign this profile to the required PHP only Workspaces.

Managing Extensions

  • General
  • Prevent Extension functionality overlap (Using Extension Load Order)
    • I have investigated this because sometimes you have functionality overlap in extentions and you cannot just disable it in one or the other due to this functionality being part of a package and their is no specific setting to disable it in either one, so what happens and how can I fix this, Extension Load Order?
    • VS Code does not provide a way to set a priority or load order for extensions such that one will always override another.
    • If two VS Code extensions overlap in functionality and you can’t uninstall or disable them either, then to manage conflicts between extensions, you must use settings, disable features, change Hot Keys, or unbind commands — not an extension ordering system.
    • Lazy Loading and Deferring Extensions · Issue #234231 · microsoft/vscode · GitHub
      • Extensions are loaded based on the activation events declared by the extension authors. Ensuring extensions are loaded in an efficient way is in part the reponsibility of the author.
      • You could also consider installing slower extensions exclusively in just the workspaces that need it. In this case you could the keep your "Defaults" to only the essentials, improving your experience.
    • VS Code Extension: How do you set an order/priority to the extension's settings/configurations? - Stack Overflow
      • "order": 1 - This isn’t talking about extension activation order or priority for their behaviors. It’s talking specifically about ordering the extension’s settings UI (how settings appear in the Settings view), not how or in what order extensions run or take priority over each other.
    • visual studio code - How VSCode Handle Conflicting Intellisense extensions on hover - Stack Overflow
  • Extensions View
    • This is the extensions panel in VSCode.
    • How do I see all of my installed extensions?
      • Click on the Extensions icon in the Activity Bar or use the keyboard shortcut Ctrl+Shift+X (Windows/Linux) or Cmd+Shift+X (macOS). This will show a list of all installed extensions, including their names, versions, descriptions, and management options. You can also use the search bar at the top to find specific extensions quickly. 
      • Filter extensions by using @installed
    • What are the inbuilt extensions/languages with vscode/
      • View extensions and then filter with @builtin
    • how do i see all of the top extensions by installs?
      • you can use the extensions filters in VScode
        • @popular (Most Popular)
        • @installs (number of installs)
        • Perhaps try both
  • List Installed Extensions (Command Line)
  • Export and Install Extensions (Command Line)
  • List Installed Extensions (by an Extension)

My Curated List

This is a list of the plugins I use, have looked at and might use in the future. The list was correct when I started and should be a god list for other people who do no now where to start. You don't need to install them all, just the ones that will be useful to you.

If there is more than one extension to do the same job, they are there because I have not used that feature and thus not picked a favourite yet.

  • Adding 2 or more extensions that do the same thing (i.e. IntelliSense for PHP or Bracket Pair Colorisers) might cause issues with stability and certainly functionality as the extensions fight with each other.
  • If you have Visual Studio Code installed and open, the easiest way to install these plugins is to click on the links below which take you to the marketplace, and then click the install button on that page which will open the correct plugin in VSCode ready for you to install in the app.

VSCode

Styling (Not Themes)
  • vscode-styled-components
    • Syntax highlighting and IntelliSense for styled-components.
    • Not sure what this is for but it is popular.
  • Apc Customize UI++
    • Advanced VSCode user interface customizations. Very experimental.
    • This extension allows customization outside vscode scope.
  • Vibrancy Continued
    • Vibrancy Effect for Visual Studio Code.
    • This gives a glass look and feel to the editor, a semi-transparent effect.
    • This may cause an error message "Your Code Installation appears to be corrupt. Please reinstall". This is caused because the VSCode CSS is being altered.
    • Set the your theme back to the system default which is "Dark+"
  • Peacock
    • Subtly change the workspace color of your workspace. Ideal when you have multiple VS Code instances and you want to quickly identify which is which.
    • If you frequently have multiple VS Code instances open and struggle to tell them apart, Peacock might be worth taking a closer look at, the extension subtly changes the color theme of your workspace.
    • But it’s not only when working on multiple projects at once where Peacock shines. It also comes in handy when using VS Live Share or VS Code’s Remote features and you quickly want to identify your editor.
    • VS Code tips - Give every window a distinct color with the Peacock extension - YouTube - The Peacock extension gives each VS Code window a distinct color based on the current workspace.
  • Window Colors including status bar
  • Custom CSS and JS (I have not tested or used these)
System Resources
  • Resource Monitor
    • Display CPU frequency, usage, memory consumption, and battery percentage remaining within the VSCode status bar.
    • The Dev Containers extension lets you use a Docker container as a full-featured development environment. Whether you deploy to containers or not, containers make a great development environment
UI / GUI
  • Shortcut Menu Bar
    • Add handy buttons like beautify, show opened files, save, toggle terminal, activity bar etc to editor menu bar. User-defined buttons are also possible.
    • Add 35+ handy buttons like beautify, show opened files, save, toggle terminal, activity bar, Find replace etc to the editor menu bar in VSCode.
    • You can also create your own buttons with custom commands.
Keybindings
  • Notepad++
    • Popular Notepad++ keybindings for Visual Studio Code
    • This extension ports popular Notepad++ keyboard shortcuts to Visual Studio Code.
    • Adds things like Ctrl + H
Toggles
  • Settings
  • Items / Text
    • Toggle Quotes
      • Toggle / Cycle " --> ' --> `
      • Allows you to change already encapsulated text, i.e. change from "..." to '...' using a Ctrl + ` instead of doing it manually.
    • Toggle Boolean
      • Easily toggle between booleans (i.e. true and false).
      • Toggles selected boolean(s), or just the boolean that's beneath the cursor.
      • Default keybinding: alt+b (or set a custom one).
  • Error, Warning and Info Toggles
    • Error Toggle
      • Adds a button into the status bar to toggle error squiggles on and off.
      • The button consists of either a tick or cross next to the text "Show Errors".
      • Perfect for when you want to temporarily hide error underlining while working on incomplete code.
    • invisible-squiggles
      • Toggle squiggles on/off from the status bar or command palette.
      • Supports errors, warnings, and info squiggles
    • Disable Error and Warning Squiggles
      • Disable Error and Warning Squiggles for all languages in your vscode editor!
      • This can be useful when you want a cleaner look while coding or presenting.
      • Command pallette only.
    • Problems Filter
      • Automatically filters the Problems panel to show only errors and warnings.
      • Tired of "Info" messages cluttering your Problems panel? This extension helps you maintain a cleaner view by default, focusing on errors and warnings, while still allowing you to easily toggle Info messages visibility.
  • Files
    • Local Files
      • Visibility Toggle (for Excluded Files)
        • Easily reveal excluded files and folders via UI toggle or command.
        • This extension lets you toggle the visibility of excluded files (in regards to exclusions via files.exclude or .gitignore) directly via the UI – perfect for anyone who wants more control over what’s shown in the Explorer.
      • Hide/Unhide Files
        • Toggle visibility of files and folders in VS Code Explorer by inverting the files.exclude settings from your workspace configuration.
        • Non-destructive: Preserves your original exclude settings.
      • Toggle Excluded Files
        • Quickly toggles excluded (hidden) files visibility in the file explorer.
        • Adds a button into the status bar.
      • Show/Hide Excluded Files
        • Quickly Show/Hide hidden files in the file explorer.
        • Status Bar Toggle Quickly Show or hide excluded files from the status bar. It can be disabled in the extension configuration.
        • Right Click Do right click anywhere in the sidebar to show/hide excluded files.
        • Multiple Commands Assign keyboard shortcuts or call the commands from the command palette.
    • .gitignore
      • Toggle "Exclude Git Ignore"
        • Toggle "Explorer: Exclude Git Ignore" (explorer.excludeGitIgnore) setting globally to show or hide .gitignore'd files on the Explorer panel with a single command.
        • Setting globally in user settings.
      • Explorer `.gitignore` Toggle
        • Quickly show and hide Git-ignored files in the Explorer.
  • AI / Copilot
    • copilot-toggle
      • Toggle GitHub Copilot autocomplete on and off
      • This lets you quickly enable or disable GitHub Copilot’s autocomplete feature from the status bar or Command Palette — without turning off Copilot entirely.
      • This is useful if you want Copilot for features like commit suggestions or chat, but don’t want inline code completions interfering while you type.
      • Nice button with text "Copilot On/Off" in the Status bar.
    • copilot-inline-toggle
      • Switcher for the GitHub Copilot inline suggestions, for better DX with Intellisense
      • A lot of people have the issue (including me) that sometimes you only want to access the autocompletion from IntelliSense. Copilot suggestions often prevent this access and thus can be sometimes very unnerving...
      • This extension solves this issue with a very simple toggler for getting rid of the grey inline suggestion that interferes with autocompletion from IntelliSense without disabling Copilot in its entirety.
    • copilot-statusbar
      • Status bar button to enable/disable GitHub Copilot completions.
      • Adds a status bar button: Autocomplete: ON / OFF.
      • Toggles Copilot completions using Copilot’s own commands when available.
      • Falls back to settings if commands are missing.
      • Respects the current scope (Workspace / Global) when changing settings.
Productivity 
  • Selecting Code
    • Text Pastry
      • Extend the power of multiple selections in VS Code. Modify selections, insert numeric sequences, incremental numbers, generate uuids, date ranges, insert continuously from a word list and more.
      • Text Pastry lets you reduce repetitive work and use multiple cursors more effectively in VS Code.
  • Navigating Code
    • Bookmarks
      • Mark lines and jump to them.
      • This extension is great when you are working with large files, you can jump with the command Pallet or use keyboard shortcuts.
  • Projects Management
    • Project Manager
      • Easily switch between projects.
      • This is needed because each VSCode instance only works on one Workspace/Project at a time.
      • This amongst other things adds a favourites pane so you can select other projects you have been working on almost like a recently opened menu.
      • VSCode extensions to maximise your productivity - YouTube | Dev tips by MoHo
        • In this video, I am going to talk about two VS Code extensions that are going to save your time if you are working on multiple projects.
        • also install Peacock for clarity on which window is for which app.
  • Time Tracking and Programming metrics
    • Code Time
      • Code Time is an open source plugin that provides programming metrics right in Visual Studio Code.
      • When you connect our GitHub App or Bitbucket App, you can measure your team’s performance against engineering KPIs and benchmarks, including velocity, quality, and scale. You can identify bottlenecks in your release process — like slow code reviews — and take immediate action, so you can ship faster and more efficiently.
      • Free for you, forever: We provide 90 days of data history for free, forever. We provide premium plans for advanced features and historical data access.
      • Code Time also collects basic usage metrics to help us make informed decisions about our roadmap.
      • Code Time Data - Software Support - All of our Code Time plugins are open source and viewable on GitHub. We do not read or store code, nor can code be reverse-engineered from the data we collect.
  • TODO Files / Markdown TODO Lists 
    • These are not TODO/FIXME comments
    • GitHub - todotxt/todo.txt - A complete primer on the whys and hows of todo. This is not an extension but a standard for .todo files.
    • Todo List
      • TodoList TreeView Editor.
      • Check your todo list with a TreeView
      • Supports *.todo
    • Todo MD
      • Todo tracking based on `todo.txt` format.
      • Lots of features and options
      • By default works for files with names todo.md, someday.md & todo.archive.md (Can be configured with todomd.activatePattern setting).
    • Todo+
      • Manage todo lists with ease. Powerful, easy to use and customizable.
    • Projects+ Todo+
      • Bird's-eye view over your projects, view all your todo files aggregated into one.
      • Requires some setting up.
    • Markdown Todo
      • Manage todo lists inside markdown files with ease.
  • Sort Settings / Reorder JSON
    • Sort settings.json
      • Sorts your settings.json file to match the order used in the Visual Studio Code settings UI, making your configuration easier to browse and maintain.
  • Misc
    • Quit Control for VSCode
      • Stop mistyping keyboard shortctus that close/quit VSCode unintentionally
      • Do you hate mistyping ⌘Q and shutdown VSCode with all your unsaved and beloved work? This extension is for you!
      • Do you hate the fact that ⌘W or CTRL+W closes VSCode if there are no open files? This extension is for you!
      • This also blocks Alt+F4 in VSCode for Windows.
      • This extension will make all "quitish" keyboard shortcuts prompt you if you really want to close everything if they were going to do so.
      • Once installed you need to restart VSCode for it to become active.
    • TypeScript Hero [Deprecated]
      • Additional toolings for typescript
      • TypeScript Hero is a vscode extension that makes your life easier. When you are coding a lot of TypeScript you may want vscode to organize your imports.
Tasks
  • Task Explorer
    • Tasks management for npm, vscode, yarn, ant, gradle, grunt, gulp, batch, bash,php composer, make, maven, python, perl, powershell, ruby, pipenv, nsis. Supports external task providers via API.
Extension Management
  • List Installed Extensions
    • A super-simple VSCode extension that lists your installed extensions in a new tab. Save the output as a .csv and keep your setup tidy.
Diff Editor (Diff / Merge / Compare)
  • swapdiff
    • Quickly swap diff direction for documents open in diff mode
    • When you swap directions with this plugin, the arrows allowing you to copy from one side to the other will dissapear. They only work in the default direction.
    • The arrows are present only for left (old) to right (new) and if you use the left/right swap plugin, the arrows will disappaer and that is why you cannot fine them.
  • Meld Diff
    • Use meld (or other tools like WinMerge, Beyond Compare, ...) to compare files, folders, clipboard or git changes from visual studio code directly.
  • Beyond Compare
    • Launch Beyond Compare with comparisons of files, folders, clipboards, and git repositories.

 

Views Containers

View Containers, as the name implies, are the "parent" container in which Views are rendered. The group of extension handle creating new View Containers, adding new Views to current View Containers or even just complementing functionality by adding buttons to views.

Explorer
  • Misc
    • Focus on Click
      • This is useful if you have the following setting "explorer.autoReveal": false
      • This adds a focus button into the Explorer Panel (which is like the Webstorm's focus button).
      • Selecting a file in the Explorer panel and then pressing this button will cause VSCode to move focus to that selected file.
    • Explorer File Sizes
      • Tiny, fast file size badges in the Explorer Panel with tooltips and optional folder sizes.
      • Hover to see exact bytes/MB.
      • Optional recursive folder sizes.
    • Open in File Manager
      • Add a button to open file manager (finder, file explorer) on the status bar and editor toolbar.
      • Doesnt work
  • Context Menus
    • Windows Explorer Context Menu
      • Opens Windows Explorer Context Menu on files and folders within VSCode.
    • ClipboardCopy
      • Copy file and folder contents to clipboard via Explorer context menu with intelligent .gitignore filtering, smart multi-selection, and mixed item support.
  • Filtering
    • VS Code File Filter
      • A file filtering extension that adds a dedicated "Filtered Files" view to VS Code's Explorer panel, allowing you to quickly find and navigate to specific files using pattern matching - just like Visual Studio's file filter functionality.
    • FileFilter
      • Persistent file filtering in the Explorer sidebar with real-time search for extensions, filenames, and directories.
    • Explorer Filter
      • Explorer Filter is a VS Code extension that allows you to filter and jump to a folder in the Explorer view.
      • A staged filter so you can go down the file tree quicky by typing in folder name, which once selected becomes the root folder for the next filter.
      • This should add another Explorer View but does not seem to work currently.
    • Hexagonal Context Filter
      • Filter the VS Code Explorer to show only the selected hexagonal context and its contents.
      • This extension helps you focus on a specific hexagonal context (module) in your project by hiding everything in the Explorer except the selected context and its contents, making it easier to work in large codebases that follow the hexagonal architecture.
    • Explorer Exclude
      • Explorer Exclude lets you easily Hide Files & Folders with Dynamic Filter Options from Explorer, Search Results & Quick Open.
      • Adds a New 'Hidden Items' Explorer Pane for you to Manage and Quickly Toggle Visibility of Hidden Items.
      • I thing the exlude list is handled internally by the extension.
      • I could not get it to filter my files.
  • Explained / Collapse Folders
  • Outline
    • Outline Map
      • A visual, interactive outline map that combines Alternative Minimap. The clarity of the outline with the intuitive overview of the minimap. Enhanced version of vscode built-in outline.
      • Automatically scroll, expand and collapse the outline tree when the cursor moves or the viewport scrolls.
    • Outline Explorer
      • This extension supports displaying outlines in a manner similar to the explorer, inspired by the "Show Member" feature in JetBrains IDEs.
      • This extension displays files and their outlines in a tree structure.
    • Outline Eclipsed
      • An outline view for VS Code that lets you drag and drop to reorganize your document structure.
      • Supports multiple languages.
      • Very useful for Markdown files and HMTL.
Problems
  • Problems: Copy Plus
    • Copy diagnostic messages from the Problems Panel to the clipboard or a file. This extension provides powerful features to filter, format, and save exactly what you need, overcoming the limitations of VS Code's built-in functionality.
    • Powerful filtering (by severity, file, message), custom formatting templates and JSON output.
    • This extension is a fork of the original Problems: Copy by ArturoDent.
  • Problems: Copy
    • Copy to the clipboard the problems shown in the Problems Panel.
Search
  • Alternative Views
    • ast-grep VSCode: Structural Search, Replace and more
      • ast-grep VSCode is a structural search and replace extension for many languages.
      • TL;DR:
        • This searches parsed code (AST) and is syntax and semantics aware.
        • You can perform search and replacements on symbols.
        • It is not a literal text search on the raw code.
        • This technique allows searches to get around human formatting inconsitencies.
        • Changes are applied to the raw code.
      • Structural Search and Replace, is a technique that allows you to find and modify code patterns based on their syntax and semantics, not just their text.
      • ast-grep is a structural search/replace tool that uses abstract syntax trees (ASTs) to represent the syntax and structure of your code, and lets you write patterns as if you are writing ordinary code.
      • Watch the video below to show what it does as the concept it hard to workout from the description.
      • ast-grep VSCode, a structural search and replace extension - YouTube
        • ast-grep is a CLI tool that allows you to search and replace code patterns based on their structure, not just their text. It uses abstract syntax trees (ASTs) to represent the syntax and structure of your code, and lets you write patterns as if you are writing ordinary code.
        • The VSCode extension can help you find and modify code elements more precisely and efficiently.
        • This video will demonstrate some of its features and benefits. Whether you are a beginner or an expert coder, ast-grep can help you save time and improve your code quality!
      • ast-grep - YouTube
        • Let's have a look at the CLI tool ast-grep to search and replace source code.Contact:david.devonduty@gmail.com#devtools #neovim
        • This discussses the problem this tool solves and explains how it is overcome.
      • Herrington Darkholme - AST Grep, Searching Code with Code - YouTube
        • This week we're joined by Herrington Darkholm, the creator of AST Grep. AST Grep is a code search tool that uses the abstract syntax tree (AST) of your code to find patterns.
        • We talk about the genesis of AST Grep, the efficiency of AST Grep in code searching, the challenge of expressing complex patterns, the versatility of YAML for rule expression, testing and evolving rules with AST Grep, and expanding AST Grep with SDKs and VS Code integration.
        • You should definitely check out AST Grep if you're looking for a powerful code search tool!
  • Other Search Types
    • Search by Sourcegraph (not currently developed but could be very useful) 
      • Lets you search across all your code (across repos, branches, and hosts like GitHub or GitLab) quickly and at scale.
      • Sourcegraph Search for VS Code allows you to search millions of open source repositories right from your VS Code IDE — for free. You can learn from helpful code examples, search best practices, and re-use code from millions of repositories across the open source universe.
      • The plugin has many useful Views that give more detailed information about the code and it's repo.
      • Usage Example:
        • Enterprise teams manage thousands of repositories across multiple platforms. Once security incedents happen or compliance audits arrive, can you find what you need across your entire codebase in minutes and nto hour, thats where Sourcegraph search comes in. This gives enterprise teams the power to search, understand and secure their entire codebase in their CLI or browser.
        • React2Shell monitoring with Code Insights across 512 repos, totaling 17GB and 42M lines of public code. - A video showing you how it is done from Sourcegraph.
      • Free and Pro available
        • To search across your team's private repositories, get Sourcegraph Enterprise.
      • Bugs:
        • The internal "Get Help" reporting links are broken as they point to a discontinued community forum.
        • There is not way to reset the current search, it will always perfom a search and I cannot get the app back to it's intitial "homepage" state. It is like a sticky session you can never quit once it is started
      • Feature Requests:
        • In the context list drop down, there is not GitHub listed as a context option.
        • annot find a way to do more that one search at a time.
      • Sites
  • search.exclude
    • Folder Exclude
      • Temporarily exclude folders from search with visual feedback
      • A Visual Studio Code extension that allows you to temporarily exclude folders from search results with visual feedback.
      • This extension contributes to the search.exclude VS Code settings whuich manages the patterns for excluding files and folders from search results
      • It adds in both these records for a folder and I don't think both are needed: 
        src/setup/upgrade/3_1_0
src/setup/upgrade/3_1_0/**

Themes

TL;DR

What themes I am using:

  • Themes | Visual Studio Code
    • Changing the color theme in Visual Studio Code. You can use color themes provided by VS Code, the community or create your own new themes.
    • Color Theme: A mapping from both UI Component Identifier and Text Token Identifier to colors. Color theme allows you to apply your favorite colors to both VS Code UI Components and the text in the editor.
    • File Icon Theme: A mapping from file type / file name to images. File icons are displayed across the VS Code UI in places such as File Explorer, Quick Open List, and Editor Tab.
    • Product Icon Theme: A set of icons used throughout the UI, from the Side bar, the Activity bar, status bar to the editor glyph margin.
Color Themes (a.k.a. Themes)
  • Color themes enable you to modify the colors in the Visual Studio Code user interface to match your preferences and work environment. A Color Theme affects both the VS Code user interface elements and the editor highlighting colors.
  • Color Theme | Visual Studio Code Extension API
    • A guide to creating Color Theme in Visual Studio Code
    • Colors visible in the Visual Studio Code user interface fall in two categories:
      • Workbench colors used in views and editors, from the Activity Bar to the Status Bar. A complete list of all these colors can be found in the theme color reference.
      • Syntax colors and styles used for source code in the editor. The theming of these colors is different as syntax colorization is based on TextMate grammars and TextMate themes as well as semantic tokens.
  • Default Theme (Built-in) = Default Themes --> Dark Modern: Default Dark modern

Others are available

I have not added every theme into my list and there are many more out there, perhaps some people have a different take on a particular theme.

File Icon Themes
  • File icons indicate a particular file type. These icons are shown alongside the file name in the Explorer view and in tabbed headings. By default, the Seti File Icon Theme is used and those are the icons you see in the Explorer view. 
  • File Icon Theme | Visual Studio Code Extension API
    • A guide to creating a File Icon Theme in Visual Studio Code
    • Visual Studio Code displays icons next to filenames throughout its UI, and extensions can contribute new sets of file icons that users can choose from.
  • Default Theme (Built-in) = Seti File Icon Theme
  • Material Icon Theme
    • Material Design Icons for Visual Studio Code (Philipp Kief)
    • This icon pack has all of the icons you would think of, even the ones for folders and files that are not considered programming languages.
    • You can add your own custom icons, create variants, change colours, use greyscale and many other features.
    • You can change the standard folder colour easily (i.e. empty folders).
    • A very active community.
  • vscode-icons - Adds real icons to your Visual Studio Code files and folders
  • Material Theme Icons - Material Theme Icons, the most epic icons theme for Visual Studio Code and Material Theme. (Material Theme)
  • VSCode Great Icons - A big pack of icons (200+) for your files.
  • Nomo Dark Icon Theme - Nomo Dark Icon Theme
  • City Lights Icon package - The City Lights icon pack is a gorgeous set of icons which you can toggle by color or grayscale to enhance your focus (Yummygum)
  • Bearded Icons - The icons with a long beard (BeardedBear).
  • file-icons - File-specific icons in VSCode for improved visual grepping.
  • Catppuccin Icons for VSCode - Soothing pastel icon theme for VSCode (Catppuccin).

Others are available

Product Icon Themes
  • Product Icon Themes enable you to change the icons in the VS Code user interface, other than the icons for specific file types. For example, you can modify the icons for the views in the Activity Bar, or the icons in the title bar for changing the layout.
  • Product Icon Theme | Visual Studio Code Extension API
    • A guide to creating Product Icon Theme in Visual Studio Code
    • Visual Studio Code contains a set of built-in icons that are used in views and the editor, but can also be referenced in hovers, the status bar, and even by extensions. Examples are the icons in filter action buttons and view icons, in the status bar, breakpoints, and the folding icons in trees and the editor.
    • A product icon theme allows an extension to redefine these icons to give VS Code a custom appearance. Not covered by product icon themes are the file icons (covered by file icon themes) and icons contributed by extensions.
  • Default Theme (Built-in) = No theme is listed.

Others are available

Extensions Packs

  • These sometimes are almost like their own piece of software but are an install list of different extensions from the store and people make them to make installing multiple extensions easer, however you might not get the exact setup you want.
  • These packs can be good to get extension suggestions.
  • PHP
    • All-in-One PHP support - IntelliSense, Debug, Formatter, Code Lenses, Code Fixes, Linting, Refactoring, PHPUnit Tests, Web Server, and more.
    • PHP Tools for VS Code is a full development integration for the PHP language. The features are provided respecting conventions, stability, simple use, and performance. Please see the product page for more details on devsense.com.
    • This package extends VS Code with fast code completion, advanced editor features, code fixes, code lenses, code generators, debugger, built-in development web server, test explorer, tests debugger, and workspace-wide code analysis.
    • Free and Paid version.
  • PHP Extension Pack (xdebug)
    • Everything you need for PHP development
    • I think it is a package an installs Debugger and IntelliSense
  • PHP Tools for Visual Studio Code (DEVSENSE)
    • PHP Tools turns Visual Studio and VS Code into a powerful PHP development environment. Edit, analyze, refactor, test & debug code in PHP.
    • All-in-One PHP support - IntelliSense, Debug, Formatter, Code Lenses, Code Fixes, Linting, Refactoring, PHPUnit Tests, Web Server, and more.
    • This has code formatting preferred code styling like PSR-12, PSR-2, Allman and K&R. 
    • This is a complete PHP development environment in one plugin but is expensive. It offers all features of Intelephense and more rolled into one package.
    • There is a free plan.
    • Not available through the Microsoft Store.
  • Python Extension Pack
    • Popular Visual Studio Code extensions for Python
    • This extension pack packages some of the most popular (and some of my favorite) Python extensions.
  • Live Sass Compiler
    • Compile Sass or Scss to CSS at realtime.
    • A VSCode Extension that help you to compile/transpile your SASS/SCSS files to CSS at real-time.
  • C/C++ Extension Pack - Popular extensions for C++ development in Visual Studio Code.

Programming Languages

There are many languages are already built in to VSCode, but some need adding.

In this section are new langauges and language specific extensions that dont fit anywhere else.

C/C++
  • C/C++
    • C/C++ IntelliSense, debugging, and code browsing.
    • The C/C++ extension adds language support for C/C++ to Visual Studio Code, including editing (IntelliSense) and debugging features.
  • CMake - CMake langage support for Visual Studio Code - is this needed becasue of cmake tools
  • CMake Tools
    • Extended CMake support in Visual Studio Code
    • This extension provides the native developer a full-featured, convenient, and powerful workflow for CMake-based projects in Visual Studio Code. It simplifies advanced configurations with support for CMake presets and enhances the development experience by supporting rich IntelliSense features, a built-in debugger for CMake scripts, and configurable CMake tasks. Its customizable interface allows for efficient tailored control of projects, while CTest integration ensures straightforward test execution and monitoring.
  • C/C++ Themes
    • UI Themes for C/C++ extension.
    • We created C/C++ Extension UI Themes to closely match Visual Studio themes and include colors for many of the new scopes.
Java
JavaScript / TypeScript
  • VarLens
    • VarLens is a powerful Visual Studio Code extension that transforms your debugging experience by providing variable inspection and persistent state tracking across debugging sessions.
    • It will remember the values of variables in your debug session so you can examine them after the code has run rather than keeping the code paused.
    • Supported Languages
      • JavaScript
      • TypeScript
    • 1. Introduction to VarLens - See Through your variable | Wani Ubaid - A simple introduction and how to use this extension.
JSON
  • json
    • This extension adds json support for Visual Studio Code.
  • Sort JSON objects
    • Alphabetically sorts the keys in selected JSON objects.
Markdown
  • Markdown and Visual Studio Code - Get the best out of Visual Studio Code for Markdown
  • Inserting images and links to files - Markdown and Visual Studio Code
    • Drag and Drop
      • You can Drag and drop a file from VS Code's Explorer or from your operating system into a Markdown editor.
      • Start by dragging a file from VS Code's Explorer over your Markdown code and then hold down Shift to start dropping it into the file.
      • The preview cursor shows where it will be inserted when you drop it.
    • Copy and Paste
      • When you paste a file, a link to a file, or a URL, you can choose to insert a Markdown link or to include the link as plain text.
    • Insert
      • Use the Markdown: Insert Image from Workspace command to insert images
      • and Markdown: Insert Link to File in Workspace to insert file links.
  • Enable Intellisense in VSCode for MarkDown Files | GitHub | arcanecode - This might not be required anymore.
PHP
  • PHP Namespace Resolver
    • Import, expand, sort, and manage PHP namespaces with full PHP 8+ support.
    • Detects unimported and unused classes, offers quick fixes, and keeps your imports clean.
    • VS Code Import Class PHP - Neutron Dev - VS Code doesn't have the option to import Classes in PHP out of the box. I'll show you how to achieve this by using an extension.
Python
  • Python
    • Python language support with extension access points for IntelliSense (Pylance), Debugging (Python Debugger), linting, formatting, refactoring, unit tests, and more.
  • Pylance
    • A performant, feature-rich language server for Python in VS Code.
    • Part of the Python package above.
  • Snippets
Rails
Ruby
  • Ruby LSP
    • VS Code plugin for connecting with the Ruby LSP
    • The Ruby LSP is an implementation of the language server protocol for Ruby, used to improve rich features in editors.
    • By Shopify
  • VSCode rdbg Ruby Debugger
    • Ruby's rdbg debugger support for VSCode.
    • A Ruby debugger to connect the debug library which utilize recent Ruby's debug support features.
  • endwise
    • This is an extension that wisely adds the "end" keyword to code structures in languages like Ruby or Crystal while keeping the correct indentation levels.
  • Ruby Test Explorer
    • Run your Ruby tests in the Sidebar of Visual Studio Code.
    • The extension supports the RSpec and Minitest test frameworks.
  • Brewfile
    • This extension adds Ruby syntax highlighting for Brewfiles.
  • Ruby Haml
    • This extension provides syntax highlighting for Ruby Haml files.
  • ERB Linter
    • This extensions provides interfaces to erb-lint for vscode.
    • This project is based on ruby-rubocop (a code analyzer for Ruby)
Smarty
  • Smarty Template Support
    • Smarty template support with formatting, folding, snippets, syntax highlighting and more.
  • Smarty Language Server
    • Smarty language support
    • This extension provides Smarty syntax highlighting and code intelligence.
    • For code intelligence, it uses the default HTML/CSS/JavaScript handling from VSCode and adds Smarty specific functionality.
  • TPL Formatter
    • TPL Formatter with formatting, folding, snippets, syntax highlighting and more
Tailwind
  • Tailwind CSS IntelliSense
    • Intelligent Tailwind CSS tooling for VS Code
    • Tailwind CSS IntelliSense enhances the Tailwind development experience by providing Visual Studio Code users with advanced features such as autocomplete, syntax highlighting, and linting.
  • Tailwind Docs
    • Easily access the Tailwind CSS documentation from within Code
  • Tailwind Shades
    • Tailwind CSS color palette generator
  • Headwind
    • An opinionated class sorter for Tailwind CSS
    • It enforces consistent ordering of classes by parsing your code and reprinting class tags to follow a given order.
TOML
  • Even Better TOML
    • Fully-featured TOML support.
    • It is currently a preview extension, it might contain bugs, or might even crash.
  • Better TOML
    • Better TOML Language support.
    • Not been updated since 2018.
YAML
Misc
  • Liquid
    • The essential vscode extension for Liquid. Supports completions, validations, formatting and intelliSense capabilities for Shopify, Jekyll and 11ty Liquid variations.
    • Liquid template language | Shopify
      • Documentation for the Liquid template language, created by Shopify.
      • Liquid is an open-source template language created by Shopify and written in Ruby. It is the backbone of Shopify themes and is used to load dynamic content on storefronts.
      • Liquid has been in production use at Shopify since 2006 and is now used by many other hosted web applications.

Media

File Integration
  • SVG
    • SVG Previewer
      • Show SVG preview to the side panel
    • Svg Preview
      • Preview for Svg files
    • SVG
      • SVG Coding, Minify, Pretty, Preview All-In-One
      • A Powerful SVG Language Support Extension. Almost all the features you need to handle SVG.
      • I have not seen this used yet, but it seems to be popular.
  • Misc
    • Draw.io Integration
      • This unofficial extension integrates Draw.io into VS Code.
      • View UML Diagrams.
      • When you create a new file, it needs to have the .drawio file extension to be recognised as a suitable Draw.io project.
      • You can export these diagrams easily.
    • Excel Viewer
      • Edit Excel spreadsheets and CSV files in Visual Studio Code and VS Code for the Web.
    • Image preview
      • Shows image preview in the gutter and on hover
    • ZipFS - a zip file system
      • Allows to easily inspect and modify files stored within zip archives.
      • This extension adds support into VSCode to read files directly from zip archives. It's maintained as part of the Yarn toolchain.
      • Paths starting with the zip: protocol (e.g. zip:/foo/bar.zip/index.js) will be resolved, the zip archive being extracted and opened as if it was a folder.
    • vscode-pdf
      • Display PDF files in VSCode.
File Handling
  • File Utils
    • A convenient way of creating, duplicating, moving, renaming and deleting files and directories.
  • FileOps
    • VS Code extension to import, group, bookmark, quick switch files, text transformations & keyboard shortcuts.
    • Look at the animation for better idea of the functionality.
  • advanced-new-file - Visual Studio Marketplace
    • Create files anywhere in your workspace from the keyboard
  • Duplicate action
    • Ability to duplicate files and directories in VS Code.
  • File Locking
    • No exclusive file locking: VS Code doesn't prevent other applications from opening, editing, or modifying the same file simultaneously.But these plugins will handle locking within VSCode and Teams.
    • lock-file-vscode-plugin
      • Allow you to set which files cannot be modified, renamed and deleted.
      • Let's say you use some extensions like chatgpt, they might delete/rename/modify files you don't want to change, this extension helps you out.
    • lockness
      • Implements file locking to prevent concurrent editing of files by multiple users.
Colour
  • Color Picker
    •  Helper with GUI to generate color codes such as CSS color notations.
  • Color Info
    • Provides quick information about css colors
  • Color Manager
    • color picker and color palette
    • Not sure if this is needed

AI

All things AI.

Coding Assistants
  • GitHub Copilot
    • Your AI pair programmer
    • GitHub Copilot is an AI peer programming tool that helps you write code faster and smarter.
    • GitHub Copilot adapts to your unique needs allowing you to select the best model for your project, customize chat responses with custom instructions, and utilize agent mode for AI-powered, seamlessly integrated peer programming sessions.
    • Free plan = 2000 code completions a month.
    • GitHub Copilot overview - Enhance your coding with AI-powered suggestions and chat conversations with GitHub Copilot in Visual Studio Code.
  • GitHub Copilot Chat
    • AI chat features powered by Copilot
    • Chat version of Copilot.
    • Ask Copilot for help with any task or question in the Chat view, bringing in code from your current files. Rather than giving you a generic answer, it can give answers that are relevant for your codebase using information provided by participants, variables, and slash commands.
    • Free plan = 50 chats per month.
  • Codex – OpenAI’s coding agent
    • Codex is a coding agent that works with you everywhere you code — included in ChatGPT Plus, Pro, Business, Edu, and Enterprise plans.
    • Codex is OpenAI’s coding agent that helps you write, review, and ship code faster. Use it side-by-side in your IDE or delegate larger tasks to the cloud.
  • Claude Code for VS Code
    • Harness the power of Claude Code without leaving your IDE
    • This is the official extension.
  • Tabnine
    • AI Chat & Autocomplete for JavaScript, Python, Typescript, Java, PHP, Go, and more
    • Tabnine is the AI code assistant that accelerates and simplifies software development while keeping your code private, secure, and compliant. It provides accurate, highly personalized results for generating code, writing unit tests, creating documentation, explaining legacy code, fixing code, and mu
    • This is an alternative to Github Copilot.
  • Qodo Gen: AI Coding Assistant (formerly Codium)
    • AI Coding Assistant (Codium VS Code) - Code, Test and Review with Confidence, supporting Python, Javascript, Typescript, Java, PHP, Go, and more
    • Qodo Gen (formerly Codiumate) (formerly Codium) is a quality-first generative AI coding platform that offers busy developers a comprehensive AI code assistant for generating code, writing unit tests, and creating documentation. With Qodo Gen, developers can leverage the power of AI directly within their IDE and Git.
    • Will generate tests for your code.
    • Qodo Gen - Generate Meaningful Code Tests - The official homepage.
  • BLACKBOX AI Coding Agent
    • BLACKBOX AI is an AI coding assistant that helps developers by providing real-time code completion, documentation, and debugging suggestions. BLACKBOX AI is also integrated with a variety of developer tools, making it easy to use within your existing workflow.
    • Free and No Signup Required
  • IntelliCode
    • The Visual Studio IntelliCode extension provides AI-assisted development features for Python, TypeScript/JavaScript and Java developers in Visual Studio Code, with insights based on understanding your code context combined with machine learning.
    • This is an AI assistant for Python, TypeScript, JavaScript and Java and IntelliCode is an AI boosted upgrade to the built-in IntelliSense code completion feature of VSCode. It uses AI to provide more accurate suggestions for code completion. It does this by analysing a developers code context to make these better suggestions.
    • It is not as powerful as GitHub Copilot but it is free.
  • Sourcery
    • Instant Code Reviews in your IDE
    • Sourcery is your pair programmer that reviews and enhances your code in real-time. With intelligent code reviews and an AI chat assistant that understands your code, you can ship better code faster.
    • Sourcery is a VS Code extension to help you move faster and ship code with confidence. Sourcery gives you code reviews anytime you want, so you can get feedback before you need to open a PR. Plus Sourcery's coding assistant helps you speed up repetitive tasks while you work.
  • Pieces
    • AI assisted code snippet manager.
    • Pieces for Developers - Long term memory for developer workflows - Pieces is your AI companion that captures live context from browsers to IDEs and collaboration tools, manages snippets and supports multiple LLMs.
    • Pieces is an app that automatically remembers your work and helps you find and reuse it later.
    • An on-device storage agent and AI coding assistant integrated throughout your entire toolchain that helps developers capture, enrich, and reuse useful code, as well as debug, add comments, and solve complex problems through a contextual understanding of your unique workflow.
    • MS Store
      • What you did, in what app, and when—it’s all saved automatically. Pieces helps you form memories of the things that matter most: documents, chats, tabs, code, research, and more. Everything stays connected to the bigger picture, so you can pick up right where you left off—without breaking your flow.
      • With Artificial & Long-Term Memory, Pieces works quietly in the background across the apps you already use, capturing context as you go. When you need something, it’s there—organized, enriched, and surfaced at the right moment.
      • Stay in control of your memories: Pieces is private and offline-first by default, with the option to backup data across devices when you choose. Search naturally by time, content, or context to find exactly what you need—even months later.
      • Pieces is more than storage. It’s a personal memory layer for your digital life, designed to keep you focused, organized, and in the moment.
    • Simple English Explanation
      • Pieces remembers your work so you don’t have to.
        • When you’re working on your computer (especially coding or writing), you constantly:
          • copy code
          • open links
          • read docs
          • chat with AI or teammates
          • switch between apps
        • Pieces quietly saves those useful bits for you and lets you find them later.
      • Think of it like this:
        • It’s a smart notebook that fills itself
        • A memory for your computer work
        • Or a “where did I see that?” button
      • What it actually does day-to-day
        • Saves code snippets, links, notes, and context automatically
        • Lets you search in plain English, like: “that React example I used last week”
        • Has an AI helper that can explain, reuse, or improve things you saved
        • Works across apps (browser, code editor, etc.)
      • What problem it solves
        • Instead of:
          • re-Googling the same thing
          • digging through old tabs
          • scrolling chat history
          • losing good code you copied once
        • You just ask Pieces or search it.
      • Who it’s mainly for
        • Developers
        • Technical writers
        • Anyone who works with lots of tabs, code, or notes
    • Free and Pro available
  • ChatGPT - Genie AI
    • Prompt OpenAI's GPT-4, GPT-3.5, GPT-3 and Codex models within Visual Studio Code
    • A Visual Studio Code - ChatGPT Integration.
    • Save conversations and continue any time.
    • Supports, GPT-4o GPT-4 Turbo, GPT3.5 Turbo, GPT3 and Codex models.
    • Create new files, view diffs with one click; your copilot to learn code, add tests, find bugs and more.
Toolkits
  • Foundry Toolkit for VS Code
    • Microsoft Foundry Toolkit is the new name for AI Toolkit.
    • Build AI agents and workflows in Microsoft Foundry, experiment with open or proprietary models.
    • This ships with the Microsoft Foundry extension built-in, giving you direct access to Microsoft Foundry resources—deploy models, manage agents, and more—without leaving VS Code.
    • Discover and evaluate models from a wide range of providers—Microsoft Foundry, Foundry Local, Anthropic, OpenAI, GitHub, Google, NVIDIA NIM—or run models locally with ONNX and Ollama.
    • Build, test, and deploy AI agents using a no-code Agent Builder for prompt agents, or write code-based hosted agents with full debugging, streaming visualization, and MCP tool integrations.
Tools
  • Slop Detection
    • AI SLOP Detector
      • Real-time AI-generated code quality analysis inside VS Code.
      • Surfaces deficit scores, structural anti-patterns, ML signals, clone detection, and actionable diagnostics without leaving your editor.
    • AI Code Coverage
      • Analyze AI-generated vs human-written code in projects.#
      • A VS Code extension for analyzing the ratio of AI-generated code to human-written code in your projects.
  • Agent Monitors
    • Too Many Cooks
      • Real-time dashboard for monitoring and managing multi-agent coordination.
      • Visualize multi-agent coordination - see file locks, messages, and plans across AI agents working on your codebase.
      • See which AI agents are active, what files are locked, and what messages are being exchanged — all from your editor.
    • Claude Code Usage
      • Monitor Claude Code usage and costs in VSCode status bar.
      • A comprehensive VSCode extension that monitors Claude Code usage and costs with detailed analytics and interactive visualizations.

The Code

Code Completion (IntelliSense)

Not quite AI but a favourite for developers.

  • HTML and CSS
    • IntelliSense for CSS class names in HTML
      • CSS class name completion for the HTML class attribute based on the definitions found in your workspace.
      • A Visual Studio Code extension that provides CSS class name completion for the HTML class attribute based on the definitions found in your workspace or external files referenced through the link element.
    • HTML CSS Support
      • CSS Intellisense for HTML
      • HTML id and class attribute completion.
    • Path Intellisense
      • Visual Studio Code plugin that autocompletes filenames
  • PHP
    • VSCode might have in-built IntelliSense for PHP
    • PHP Intelephense
      • PHP code intelligence for Visual Studio Code.
      • Intelephense can be used as a formatter and a linter.
      • Official
        • Intelephense: Documentation
          • It is recommended you read these instructions as they offer some very helpful information.
          • Installation: The built-in VSCode PHP Language Features extension can cause excessive completion suggestions that are out of context and is best disabled. Go to the Extensions UI and search for PHP Language Features to disable it. Alternatively, you can disable parts of it via it's configuration settings. Other third party extensions that provide similar functionality to Intelephense may also need to be disabled for best results. 
          • Best Practice: Providing type information in your PHP code will result in a better experience when using Intelephense. Type information can be provided via coded type declarations or PHPDoc type annotations. Where both have been provided, PHPDoc type annotations are given precedence as they can provide more detailed type information. 
        • GitHub - bmewburn/vscode-intelephense
          • This has proper lsit of premium features.
        • GitHub - bmewburn/vscode-intelephense: Quick Start
      • General
        • DocBlocks with auto completion is a Pro feature. The free version (maybe just VSCode) creates and empty DocBlock in the usual mannor /**
      • Tutorials
      • Issues
        • Q: Sometimes after I correct an error, there still is a red wavvy underline where the error was and this does not disapear until I save, which can be frustrating.
        • A: This is not caused by Intelephense, it is because you have not disabled the built-in VSCode PHP Language Features as per the Quick Start instructions. Once installation is complete, Intelephense's official documentation recommends that you disable the built-in PHP Language Features extension that comes with VS Code so:
          • Go to the `Extensions UI`
          • Search for `PHP Language Features` and disable it. 
        • Q:Everytime I save a change, Intelephense updates its index and this slows VSCode response time down while it is indexing.
        • A: Xampp Causes PHP Intelephense to start indexing · Issue #3357 · bmewburn/vscode-intelephense · GitHub
          • Windows Defender is causing the slowness, so I added an exclusion which fixes that, but why is intelephense triggering an index refresh (might just be a reflex and not an index).
    • PHP IntelliSense
      • Advanced Autocompletion and Refactoring support for PHP
      • Might not be needed in new versions of VSCode.
    • vscode-phpactor
      • Phpactor PHP Language Server extension for vscode
      • Integrates Phpactor with VSCode.
      • Note that the Phpactor Language Server currently only runs on Linux and macOS so if you are on Windows you might need to make use of WSL or a Linux VM combined with VSCode Remote.
      • This is difficult to setup, but has some powerful features.
      • GitHub - phpactor/phpactor
        • Mainly a PHP Language Server with more features than you can shake a stick at - phpactor/phpactor
        • This project aims to provide heavy-lifting refactoring and introspection tools which can be used standalone or as the backend for a text editor to provide intelligent code completion.
      • VS Code — Phpactor latest documentation - Intelligent completion and refactoring tool for PHP
  • Python
    • Python Type Hint
      • Type hint completion for Python.
      • Provides type hint auto-completion for Python, with completion items for built-in types, classes and the typing module.
    • Python Path
      • Python imports utils.
      • This extension adds a set of tools which help you generate internal import statements in a python project.
  • JavaScript
    • npm Intellisense
      • Visual Studio Code plugin that autocompletes npm modules in import statements
  • Misc
Code Insertion (Snippets)
  • IntelliCode API Usage Examples
    • See relevant code examples from GitHub for over 100K different APIs right in your editor.
  • Regex Snippets
    • Easily Insert Popular Regex Codes Without Memorising Anything!
    • A VS Code Extension with a list of 50+ hand picked Regex Code Snippets to make lives of many Developers much easier.
  • JavaScript (ES6) code snippets
    •  Code snippets for JavaScript in ES6 syntax (supports both JavaScript and TypeScript).
  • Evondev snippets
    • Useful HTML CSS snippets for a Frontend Developer.
  • HTML/CSS/JavaScript Snippets
    • HTML/CSS/JavaScript/Jade/Pug/Less/Sass/Stylus/ES6 Snippets Support.
    • Just enter the prefix name, and the complete code snippet will be automatically completed.
Code Correction (Linters)
  • Mixed Language Support
    • Biome
      • The Biome extension for Visual Studio Code brings first-class support for Biome in VS Code and VS Code-based editors.
      • Formatting and Linting
      • By integrating with Biome's language server, the extension provides the following features:
        • Format on save
        • Code refactoring
        • Inline suggestions and quick fixes
      • Official
      • General:
        • settings.json controls the Biome VSCode extension.
        • Biome’s formatting/linting rules live in biome.json/biome.jsonc
        • is a performant toolchain for web projects, it aims to provide developer tools to maintain the health of said projects.
        • is a fast formatter for JavaScript, TypeScript, JSX, JSON, CSS and GraphQL that scores 97% compatibility with Prettier.
        • is a performant linter for JavaScript, TypeScript, JSX, CSS and GraphQL that features more than 270 rules from ESLint, typescript-eslint, and other sources. It outputs detailed and contextualized diagnostics that help you to improve your code and become a better programmer!
        • is designed from the start to be used interactively within an editor. It can format and lint malformed code as you are writing it.
        • has sane defaults and it doesn't require configuration.
        • aims to support all main languages of modern web development.
        • doesn't require Node.js to function.
        • has first-class LSP support, with a sophisticated parser that represents the source text in full fidelity and top-notch error recovery.
        • unifies functionality that has previously been separate tools. Building upon a shared base allows us to provide a cohesive experience for processing code, displaying errors, parallelize work, caching, and configuration.
      • Installing
        • Biome does not need NodeJS. The npm manager can be used to install the binary, but this route is optional.
        • You can manually download the binary and place it in your systems PATH.
        • Manual installation | Biome - Install the Biome manually
          • If you’re already using npm or another package manager, then using the package manager is the preferred way to install Biome. You’re already familiar with the tooling, and installing and updating are simpler.
        • Installing - Getting Started | Biome - Learn how to set up a new project with Biome. 
          npm install --save-dev --save-exact @biomejs/biome
npm i -D -E @biomejs/biome
          • install / -i:
            • Tells npm to add a package to the project.
          • --save-dev / -D:
            • Saves the package in devDependencies of package.json (only needed during development, not at runtime).
          • --save-exact / -E:
            • Forces npm to record the exact version of the package (e.g., 1.2.3) instead of a range like ^1.2.3. Guarantees that every install gets the same version.
            • We are instructing the package manager to pin an exact version of Biome. This ensures that everyone within a project has exactly the same version of Biome. Even a patch release can result in slightly different behavior.
          • @biomejs/biome:
            • The name of the package being installed. It’s the Biome CLI/linter/formatter published under the @biomejs scope.
        • npm global install is now supported
          • Biome will install globally and you should not get the "Binary not found" error
          • I recommend installing Biome as a global package for small projects and workflows. 
            npm install -global --save-exact @biomejs/biome
npm i -g -E @biomejs/biome
          • --global / -g:
            • Installs, removes, or links packages at the system/user level instead of the current project.
            • Pro:
              • You only have to install the package once per system.
            • Con:
              • All projects all use the same version of the package, unless locally overrriden (if possible)
            • Usage:
              • For test packages taht are not specific to any software being developed.
        • This creates the config file. It might be a standard command amongst npm packages 
          npm biome --init
        • Configuring a custom location for biomejs in VSCode – Martins Blog
          • The VSCode extension assumes that Biome is present at the project’s root directory, which is fine most of the time.
          • There are some occasions though when that’s not the case for me, like for example when I’m publishing code used for my conference talks.
        • Setting Up Biome in VSCode | Zhengchao Tian - Easy to follow install and basic usage instructions.
      • Unable to find binary
      • biome.json or biome.jsonc
        • Biome supports both biome.json and biome.jsonc
        • Biome automatically detects .jsonc and .json5 as allowing comments/trailing commas.
        • JSONC support - Language support | Biome - Biome doesn’t provide a dedicated language configuration for JSONC. Instead, we’ve enhanced our JSON parsing and formatting capabilities.
        • Should I use `biome.json` or `biome.jsonc` for my biome config file · biomejs/biome-vscode · Discussion #984 · GitHub
          • Q: My understanding both of these files would work for my biome config, but is there a preference to which should be used?
          • A: .jsonc extension accepts comments in your file. So if you want to document decisions, etc. in your configuration, you should choose.jsonc
        • Separate json and jsonc/json5 formatting · biomejs/biome · Discussion #1620 · GitHub
          • Q: This setting will apply to all json files including files that does not support comments or trailing commas.
            {
  "files": {
    "include": ["**/*.json"]
  },
  "json": {
    "parser": {
      "allowComments": true,
      "allowTrailingCommas": true
    }
  }
}
          • A:
            • I think there's a bit of confusion/misunderstanding.
            • JSON doesn't support comments or trailing commas. Although, some tools such as VSCode are tolerant and allow comments and trailing comma in some of its files. It parses those JSON files as they were JSONC files
            • In an attempt to meet the community halfway, we added those settings.
          • Q: So if I want to make the config accurate for all json files, I should turn those off at the base, and override them for all those offenders. 
          • A: Yes exactly!
      • ESLint and Prettier to Biome
      • .editorconfig
        • formatter.useEditorconfig - Configuration | Biome
          • Whether Biome should use the .editorconfig file to determine the formatting options.
          • The config files .editorconfig and biome.json will follow the following rules:
            • Formatting settings in biome.json always take precedence over .editorconfig files.
            • .editorconfig files that exist higher up in the hierarchy than a biome.json file are already ignored. This is to avoid loading formatting settings from someone’s home directory into a project with a biome.json file.
            • Nested .editorconfig files aren’t supported currently.
          • Default: false
        • No option in the GUI to configure, only in the settings.json file
      • Misc
        • Allow downloading pre-releases · Issue #593 · biomejs/biome-vscode · GitHub - Removing the binary downloader (bundled version) = is intentional = Affects 3.x+ series.
          • We're actually sunsetting the downloader in the upcoming stable.
          • Instead, we recommend the following approaches, depending on your use case:
            • Install Biome directly in your project's dependencies
            • Install Biome globally on your system
          • The extension will use the version in your project's deps to create an LSP session for the files of your project, and will use the global Biome installation to create an LSP session for files that do not belong to a workspace folder (e.g. when you edit an unsaved file in VS Code).
      • Per file rule supressions
      • Exclude files from Biome
        • Use the ignore file - Integrate Biome with your VCS | Biome
          • At the moment, Biome only supports Git.
          • Enable vcs.useIgnoreFile, to allow Biome to ignore all the files and directories listed in the project’s VCS ignore file as well as a .ignore file. 
            {
  "vcs": {
    "enabled": true,
    "clientKind": "git",
    "useIgnoreFile": true
  }
}
        • useBiomeIgnoreFolder | Biome - Learn more about useBiomeIgnoreFolder
        • Control files via configuration - Configure Biome | Biome
        • Include files via configuration - Configure Biome | Biome
        • Exclude files via configuration - Configure Biome | Biome
          • If you want to exclude files and folders from being processed by Biome, you can use the files.includes configuration and use the negated patterns.
          • In this example, the file expense_other.js will not be processed by Biome.
            • Place this in your biome.json or biome.jsonc 
              {
  "files": {
    "includes": [
      "**",
      "!!**/expense_other.js"
    ]
  }
}
            • Effectively with this, you include everything and then exclude what you dont want.
            • ** says include everything.
            • ! and !! are levels of exclusion. !! is full and what I want.
          • This is the same as above but just on a single line 
            {
  "files": {
    "includes": ["**", "!!**/expense_other.js"]
  }
}
        • Troubleshooting
          • Ensure the config file is named correcly (biome.json, biome.jsonc), does not contains invalid characters, or if it has a hidden .txt extension (eg biome.json.txt).
          • Biome can self checks it's config
            • From the terminal run 
              npx @biomejs/biome check biome.json
            • In your terminal, what is the exact error message it prints? It usually points to a specific line and column causing the issue.
    • ESLint
      • This is not the actual software, but just an extension so it can be used in VSCode.
      • See the ESLint section in npm packages for installing ESLint.
      • Integrates ESLint JavaScript into VS Code.
      • This is a linter for: Javascript, Typescript, JSON, Markdown, CSS, HTML
      • ESLint can handle line endings (EOL).
      • Uses minimatch-based glob patterns to match files.
      • ESLint does not support CR-only (\r) endings
      • ESLint enables a curated set of rules that help catch common bugs and bad practices — but intentionally excludes stylistic opinions.
        • However it does not seem to have some code formatting features so going forwared it might also become a full formatter.
      • Plugins TL;DR
        • need to be installed via npm
        • @eslint/js comes as part of the installation because ESLint use to only Lint JavaScript but now has move the JS rules code out into its own package.
        • Thre are many 3rd party plugins covering a lot of different languages.
        • plugins need installing and then referencing int he config file specifically
      • Config TL;DR
        • ESLint commands can be put in the .vscode/settings.json
        • Plugins need specifically referencing to bring their configs into yours.
        • Starting in ESLint v8.21.0, ESLint introduced a new flat config format (eslint.config.js). In this format, ESLint no longer automatically includes its own default rules. So if you want the standard "recommended" ESLint rules, you must explicitly import them from @eslint/js.
      • Requires
        • ESLint, NPM and NodeJS packages to be installed.
      • VSCode Settings
        • You can configure some ESLint-related settings in VS Code’s settings.json, but not ESLint rules themselves — those belong in your ESLint config (eslint.config.js, .eslintrc, etc.).
        • Settings Options - ESLint - Visual Studio Marketplace - A list of settings you can use in .vscode/settings.json
        • save selectively per language | microsoft/vscode-eslint · GitHub
          • Added configuration options to enable code actions and auto fix on save selectively per language. 
            "eslint.validate": [ "javascript", "javascriptreact", { "language": "html", "autoFix": true } ]
        • Added support to validate file types other than JavaScript. | microsoft/vscode-eslint · GitHub - To enable this, you need to do the following:
          • Configure ESLint with an additional plugin to do the actual validation. For example, to validate HTML files install eslint-plugin-html using npm install eslint-plugin-html --save-dev and update the ESLint configuration (e.g. .eslintrc.json file) with "plugin": [ "html" ].
          • Add the corresponding language identifier to the eslint.validate setting. Something like "eslint.validate": [ "javascript", "javascriptreact", "html" ]. If the setting is missing, it defaults to ["javascript", "javascriptreact"]
        • Format on Save
          • How to Format on Save with ESlint | Aleksandr Hovhannisyan - Set up ESLint to format on save in two popular code editors: VS Code and neovim.
          • A trigger command to be installed Open .vscode/settings.json in your project (or use global settings.json) and add: 
            {
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}
      • Extension Specific
        • eslint-disable-snippets
          • Itellisense for eslint disable comments.
          • Start typing eslint-disable in a file to trigger the snippet autocomplete.
    • webhint
  • JavaScript
    • quick-lint-js
    • StandardJS
      • Visual Studio Code extension for JavaScript Standard Style with automatic fixing.
      • This uses Javascript Standard Style (StandardJS)
        • Style guide, linter and formatter
        • Alternative to ESLint/Prettier
        • It "just works" (no descisions, no configuration, no overrides) (e.g. opinionated)
        • Uses ESLint behind the scenes
      • Requires NodeJS.
      • StandardJS Tutorial: A Simple Alternative to Prettier & ESLint! - YouTube | The Common Coder
        • Tired of managing both Prettier and ESLint? StandardJS (JavaScript Standard Style) might the all-in-one solution you've been looking for!
        • StandardJS takes the hassle out of configuring both Prettier and ESLint by offering a single tool that handles the linting and formatting of your JavaScript code.
      • In this video, we'll learn how to install and configure StandardJS in a project, and show you just how easy it is to use.
      • Whether you’re tired of juggling multiple tools or just curious about other options, StandardJS is worth checking out if you’re looking for a Prettier and ESLint alternative. Plus, it works seamlessly with Visual Studio Code for a smooth development experience.
  • PHP
    • VSCode and it's extensions, uses these Static analysis tools to generate Problems and shows them in the problems panel.
    • PHP Static Analysis is the practice of examining PHP source code without executing it to find problems, improve code quality, and enforce coding standards. Instead of running your app, static analysis tools read the code and reason about it. 
    • PHP static analysis is automated code inspection that finds bugs, type errors, and design issues in PHP code without running it.
    • Advanced Static Analysis in PHP: Leveraging Psalm, PHPStan, and Beyond | by mohamad shahkhajeh | Medium - This guide shows how experienced teams turn static analysis into a guardrail system for complex PHP systems (monoliths or microservices), with practical patterns and configurations you can adopt immediately.
    • Example Tools:
      • PHPStan
      • Psalm
      • Phan
      • PHP_CodeSniffer
      • ESLint
    • A linter is a static analysis tool, but it’s only one type of static analysis tool.
    • Practical Setup
      • Most PHP projects use both:
        • Linter → clean, consistent code
        • Static analyzer → correct, safe code
      • Example stack:
        • PHP_CodeSniffer + PHPStan
        • PHP-CS-Fixer + Psalm
    • PHP Sniffer & Beautifier
      • PHP Sniffer & Beautifier for Visual Studio Code
      • This linter plugin for Visual Studio Code provides an interface to phpcs & phpcbf. It will be used with files that have the “PHP” language mode.
      • This extension is designed to use auto configuration search mechanism to apply rulesets to files within a workspace. This is useful for developers who work with many different projects that have different coding standards.
    • PHP_CodeSniffer
      • Brings PHPCS support to VS Code.
      • This extension uses the version of PHPCS defined by the platform-specific executable setting. Through the use of custom reports we are able to generate diagnostics, code actions, and document formatting that fully utilizes VS Code's available features.
    • php cs fixer - PHP CS Fixer extension for VS Code, php formatter, php code beautify tool, format html
    • phpcs (PHP CodeSniffer) [Deprecated]
      • This linter plugin for Visual Studio Code provides an interface to phpcs. It will be used with files that have the “PHP” language mode.
    • PHPStan (PHP Static Analysis Tool)
      • PHPStan inline error provider
      • Automatically runs PHPStan of your code and highlights errors as you type.
      • Performs project-wide analysis and displays all errors in the Diagnostics tab.
      • Shows the values of variables according to PHPStan at the point of hovering when using phpstan.showTypeOnHover setting.
      • PHPStan focuses on finding errors in your code without actually running it. It catches whole classes of bugs even before you write tests for the code. It moves PHP closer to compiled languages in the sense that the correctness of each line of the code can be checked before you run the actual line.
      • GitHub - phpstan/phpstan - PHP Static Analysis Tool - discover bugs in your code without running it!
      • Introducing PHPStan Pro – Save Your Keystrokes and Get More Productive! | PHPStan
        • A premium package with extra features. Beautiful web UI instead of CLI to browse your errors, auto-refresh with continuous analysis in the background.
        • Pro is $7 a month
      • Find Bugs Without Writing Tests | PHPStan
        • PHPStan finds bugs in your code without writing tests. It's open-source and free.
        • PHPStan scans your whole codebase and looks for both obvious & tricky bugs. Even in those rarely executed if statements that certainly aren't covered by tests.
        • You can run it on your machine and in CI to prevent those bugs ever reaching your customers in production.
      • Phpstan specific phpdoc annotations in the core code base - Core - TYPO3 - A discussion on how a company used phpstan features in regular phpdoc annotations in their code
    • Psalm (PHP Static Analysis Linting Machine)
      • VS Code Plugin for Psalm
      • Psalm is a static analysis tool for finding errors in PHP applications.
      • Runs Psalm's analysis when opening and saving files using the Language Server Protocol for communication.
      • Psalm (Homepage) - Psalm is a free & open-source static analysis tool that helps you identify problems in your code, so you can sleep a little better
      • GitHub - vimeo/psalm
        • A PHP static analysis tool for finding errors and security vulnerabilities in PHP applications
        • Made by Vimeo.
  • Specific Languages
    • HTMLHint
      • VS Code integration for HTMLHint - A Static Code Analysis Tool for HTML
      • Integrates the HTMLHint static analysis tool into Visual Studio Code.
      • By HTMLHint
      • htmlhint - npm - The Static Code Analysis Tool for your HTML.
      • HTMLHint | HTMLHint - The web's most popular Static code analysis tool you need for your HTML. Available as a CLI tool, VS Code extension, and more.
      • This creates uses a .htmlhintrc config and not a .hintrc which by webhint or Microsoft Edge Dev Tools which has webhint built-in.
      • Getting Started | HTMLHint - How to set up HTMLHint in your project by adding it as a dev dependency and configuring it.
        • Create a .htmlhintrc configuration file in the root of your project with htmlhint --init. This will create a file with default rules. (not sure this is need with the VSCode extension)
      • Configuration | HTMLHint - How to configure HTMLHint using a configuration file, command line options, or inline comments.
        • By default, HTMLHint looks for a .htmlhintrc file in the current directory and all parent directories, and applies its rules when parsing a file:
    • Stylelint
      • Official Stylelint extension for Visual Studio Code
      • Linter for CSS, LessCSS
      • ForrestKnight says the inbuilt CSS linter of VSCode is good enough for him but could be good for others
    • markdownlint
  • Tools
    • Microsoft Edge Tools for VS Code
      • Use the Microsoft Edge Tools from within VS Code to see your site's runtime HTML structure, alter its layout, fix styling issues as well as see your site's network requests.
      • Microsoft Edge DevTools extension for Visual Studio Code - Microsoft Edge Developer documentation | Microsoft Learn - Using the Microsoft Edge Developer Tools extension for Visual Studio Code.
      • This has webhint built-in.
        • See webhint entry for more information in this software.
        • Microsoft Edge Tools warnings in VSCode - Stak Overflow
          • Found it. These messages appear to be coming from WebHint. It looks like VSCode has this as a built-in feature (i.e. you don't need to explicitly install it from Extensions pane).
          • The feature can be turned off using VSCode Settings. Name of the setting is vscode-edge-devtools.webhint and is turned on by default. Turn it off and all these messages will vanish away.
          • The warnings come from the built in WebHint integration. WebHint can be turned off in the settings, or it can be configured with a .hintrc file in the project.
        • Inline and live issue analysis - Microsoft Edge Developer documentation | Microsoft Learn - Inline and live issue analysis in the Microsoft Edge Developer Tools extension for Visual Studio Code.
          • This feature requires Node.js and npm (Node Package Manager). = I am not sure about this as I think the binary is bundled.
          • This feature is on by default; the Webhint checkbox is selected in Settings. To turn this feature on or off:
            • Select Activity Bar --> Microsoft Edge Tools --> hover to the right of Targets --> More Actions (...) --> Open Settings --> select or clear the Webhint checkbox
    • Code Spell Checker
      • A basic spell checker that works well with code and documents.
      • The goal of this spell checker is to help catch common spelling errors while keeping the number of false positives low.
    • Error Lens
      • Improve highlighting of errors, warnings and other language diagnostics.
      • i.e. it will highlight your code errors and what the errors are.
      • Error Lens turbo-charges language diagnostic features by making diagnostics stand out more prominently, highlighting the entire line wherever a diagnostic is generated by the language and also prints the message inline.
    • Gremlins Tracker
      • Reveals some characters that can be harmful because they are invisible or looking like legitimate ones. Inspired by Sublime Gremlins.
      • I don't know if this is needed now because this might be part of modern linters.
    • Workspace Formatter
      • Format all your files in a workspace with one click.
      • You can define include and exclude patterns to manage which files and directories should be formatted. Besides that, you can also select only certain directories to format with the context menu.
    • Format Files - Visual Studio Marketplace
      • Formats all files in the current workspace/selected folder/glob.
      • Due to the limitations in VSCode API, this opens each file, runs formatting command, saves the file (other save actions are started as well, to support features such as tslint.autoFixOnSave on typescript files), then closes it.
      • The time to complete depends on the number of files and how large the files are.
      • This isold and I have not tested it.
Code Comments (Docstrings / TODO: / FIXME: / BUG:) 
  • DocBlock
    • Document This
      • Automatically generates detailed JSDoc comments in TypeScript and JavaScript files.
      • This is a Visual Studio Code extension that automatically generates detailed JSDoc comments for both TypeScript and JavaScript files.
    • Doxygen Documentation Generator
      • This VS Code Extensions provides Doxygen Documentation generation on the fly by starting a Doxygen comment block and pressing enter.
      • C and C++
    • PHP DocBlocker
      • A simple, dependency free PHP specific DocBlocking package.
      • Old but is the original and still works.
    • Mintlify Doc Writer for Python, JavaScript, TypeScript, C++, PHP, Java, C#, Ruby & more
      • AI powered documentation writer for JavaScript, Python, Java, Typescript & all other languages.
      • Writing documentation sucks. Let Mintlify take care of it. Just hightlight code and see the magic.
      • Docstring formats supported
        • JSDoc
        • reST
        • NumPy
        • DocBlock
        • Doxygen
        • Javadoc
        • GoDoc
        • XML
        • Google
        • More under construction
    • autoDocstring - Python Docstring Generator
      • Generates python docstrings automatically
      • Visual Studio Code extension to quickly generate docstrings for python functions.
    • Doc Block Helper
      • Smart formatting for documentation blocks
      • A VSCode extension that makes writing documentation blocks easier by automatically continuing comment blocks and managing indentation.
    • List all functions that do not have a Docblock
      • VS Code doesn't have a built-in "find functions without docblocks" feature, but we can use one of these methods below until I find a suitable extension
      • Method 1: Using Regex Search 
        • Since a "docblock" usually refers to the /** ... */ syntax (JSDoc/Doxygen style) sitting immediately above a function, we can search for functions that aren't preceded by that pattern.
        • This method looks for function definitions that have a "normal" line or a bracket above them instead of a comment.
          1. Open the Global Search (Ctrl + Shift + F or Cmd + Shift + F).
          2. Click the . icon* in the search box to enable Regular Expressions.
          3. Paste the following regex (optimized for JavaScript/TypeScript/PHP): 
            ^(?!\s*\*\/|\s*\/\/)(\s*(async\s+)?function\s+\w+|^\s*\w+\s*=\s*(\(.*\)|async\s*\(.*\))\s*=>)
        • How this breaks down:
          • ^(?!\s*\*\/|\s*\/\/): This is a negative lookahead. It tells the search: "Do not match if the line above ends a comment (*/) or is a double-slash (//)."
          • (\s*(async\s+)?function\s+\w+...): This matches standard function declarations or arrow functions.
          • Note: Regex is "blind" to context. If you have functions defined inside objects or classes with very specific formatting, you might need to tweak the pattern to match your specific coding style.
      • Method 2: Using an Extension
        • If you need to do this often or want to enforce it across a team, a linter is much more reliable than a search string.
          • ESLint (for JS/TS): Use the require-jsdoc rule (or the newer jsdoc/require-jsdoc from the eslint-plugin-jsdoc). It will underline every function missing a block and list them all in your Problems tab (Ctrl + Shift + M).
  • TODO: / FIXME: / BUG:
    • Todo Tree
      • Show TODO, FIXME, etc. comment tags in a tree view.
      • This extension quickly searches (using ripgrep) your workspace for comment tags like TODO and FIXME, and displays them in a tree view in the activity bar. The view can be dragged out of the activity bar into the explorer pane (or anywhere else you would prefer it to be).
      • The predefined keywords BUG, FIXME, HACK, and TODO are present without the colon so you might want to edit them and add the colon on to the end of them to folow normal convetions,
      • If you are using another exention for highlighting you can disable highlighting in this extension.
      • On large projects this might slow initial loading down becasue it has to enumerate the whole file tree.
      • You can add custom Tags.
    • TODO Highlight v2
      • This is a fork of Todo Tree
      • Highlight TODO:, FIXME: and any other annotations you wish within your code in VSCode.
      • Sometimes you forget to review the TODOs and NOTEs you've added while coding before you publish the code to production. This extension highlights them, making them harder to forget. They're shown in the file, in the output channel, and optionally as decorations in the 'overview ruler' too.
      • Command: List highlighted annotations
        • List annotations to the Output tab when you have a folder and/or workspace open.
        • When you are working on individual files in one or more editors, the command returns 0 results.
        • The results are not instant becasue it searches the project.
      • Show TODO in the problems colum
        • There is an option for this, but this is not perfect.
      • Only TODO: and FIXME: are predefined so you will need to add BUG: etc...
      • Tags colouring can be completely customised.
      • You can add custom Tags.
    • TODO Highlight
      • highlight TODOs, FIXMEs, and any keywords, annotations...
      • Sometimes you forget to review the TODOs you've added while coding before you publish the code to production. So I've been wanting an extension for a long time that highlights them and reminds me that there are notes or things not done yet.
      • No longer developed.
    • TODO
      • Highlight annotations inside comments.
      • By default, 3 types of annotations are supported: NOTE, TODO and BUG.
      • They can be used by writing e.g. NOTE: or NOTE@Whatever:.
      • I colours the font of TODO: and then the writing afterwards
    • Todo Tomorrow
      • Highlights TODO, HACK, FIXME, etc. comments.
      • By default this extension justs bolds the keywords.
      • You can override the keywords and their styles.
    • Highlight
      • Advanced text highlighter based on regexes. Useful for todos, annotations, colors etc.
      • There are alternative extensions that you may be considering, like TODO Highlight, but this is more generic, this can apply different styles to different capturing groups within the same regex, and this is focused on doing only one thing and doing it well.
  • Misc
    • Better Comments
      • Improve your code commenting by annotating with alert, informational, TODOs, and more!
      • The Better Comments extension will help you create more human-friendly comments in your code.
Code Information

Show information about your code, libraries and packages you are using.

  • Version Lens
    • Shows the latest version for each package using code lens.
    • This extension shows version information when opening a package or project file in vscode.
    • It abides by semver rules and uses the Node Semver package to compare and sort versions.
    • Many languages supported.
  • Import Cost
    • Display import/require package size in the editor
    • This extension will display inline in the editor the size of the imported package. The extension utilizes webpack in order to detect the imported size.
    • Forces you to look at the size of your 3rd party Javascript packages straight in your editor.
    • This is for web designing and Javascript.
  • tl;dr pages
    • Hover for commands using simplified and community-driven man pages.
    • Provides tldr hover information for common commands in
      • Shell scripts, Batch files, Dockerfile, PowerShell and Makefile files.
    • tldr pages are a collection of simplified and community-driven man pages.
  • tl;dr panel
    • A utility panel for tldr-pages shell command summaries
    • A utility for quick and easy command lookups directly in VSCode. Makes use of the excellent tldr pages.
    • tldr is a collection of community-maintained help pages for command-line tools, that aims to be a simpler, more approachable complement to traditional man pages.
    • Features
      • Ability to search any command available in the tldr documentation
      • Lightweight and fast, opens directly in vscode using the command palette
      • Always up to date with the official tldr pages
Code Symbol Navigation
  • Function Explorer
    • Function explorer and marked functions.
    • Currently only Javascript, Typescript, Python, C, C++, Java, C#, Go, and Rust are supported.
    • Additional languages will be added frequently.
    • Put in your vote for languages to add in the repo issues.
  • Sidebar Function List
    • Show a function list of the opened file at the sidebar.
    • At the moment, it works with all languages that use the 'function' keyword for function declaration, such as JavaScript, PHP.
    • Now also works with Python files.
  • CSS Peek
    • Allow peeking to css ID and class strings as definitions from html files to respective CSS.
    • Allows peek and goto definition.
    • This extension adds support for Go To Definition and Go To Symbol in Workspace for css/scss/less classes and IDs found in HTML/React/Vue/Svelte/Pug/ejs/etc.
Code Statistics
  • Misc
    • Word Count
      • Markdown Word Count Example - a status bar contribution that reports out the number of works in a Markdown document as you interact with it.
      • It's pretty simple open up a Markdown file and the status bar will have an auto-updating wordcount in it.
  • Line Counters
    • VS Code Counter
      • Count lines of code in many programming languages.
      • It generates reports in Markdown format in a folder it creates, if not present, called ./VSCodeCounter/ so you should make sure this is excluded from your Git commits.
      • The report is broken down into the different programming languages.
      • Has a real time counter option for the Status Bar
    • CodeViz Stat
      • Explore source code statistics with animated vizualizations.
    • Codeline Counter
      • Counts lines of code in files or workspace.
      • simple extensions but allows you to configure what folders are scanned.
    • Count Code Lines
      • Counts the lines of code in the current file and displays the result in a terminal window.
Code Display / Syntax Highlighting

Make your code easier to read without altering the actually content.

  • Brackets
    • Bracket Pair Color DLW
      • A VS Code extension that gives you a simple command to quickly toggle the global “Bracket Pair Color DLW” setting added in VS Code v1.60.
      • This adds a toggle and not functionality.
    • Bracket Pair Colorization Toggler
      • Quickly toggle 'Bracket Pair Colorization' setting with a simple command
      • Same as 'Bracket Pair Color DLW'
    • Bracket Pair Colorizer 2 [Deprecated]
      • A customizable extension for colorizing matching brackets
      • This project started on 3 Dec 2016. Now 5 years later, it has become a native feature in VSCode.
      • I'm glad so many people found it useful, however it no longer has a purpose entering 2022 so development will no longer continue.
      • This extension is deprecated as this functionality is now built-in to VS Code. Configure these settings to use this functionality.
  • Tags
    • Highlight Matching Tag
      • Highlights matching closing and opening tags.
      • This extension highlights matching opening and/or closing tags.
      • Optionally it also shows path to tag in the status bar.
      • Even though VSCode has some basic tag matching, it's just that - basic. This extension will try to match tags anywhere: from tag attributes, inside of strings, any files, while also providing extensive styling options to customize how tags are highlighted.
      • Officially supported markup: HTML and JSX. Other flavors (XML, Vue, Angular, PHP) should work, but there are no guarantees. Feel free to report the issues on them anyway.
      • This extension is probably not needed anymore because this functionality is built in to VSCode, however it does add additional styling options.
  • Indentation
    • Indent-Rainbow
      • Makes indentation easier to read by generating a rainbow palette staggered for each indentation.
      • When this extensions causes red blocks to appear, this is indication on of the following
        1. there is a mismatch in the indentation, e.g. maybe 3 spaces instead of 4 spaces.
        2. if there are spaces or tabs where they are not needed.
        3. maybe a when there is a mix of tabs and spaces for indentation.
    • Evondev - Indent Rainbow Palettes
    • Indenticator
      • Highlights your current indent depth.
      • This creates an indicator line on the column where you click your cursor, is does not add an indicator line for the lowest code group on the row. VSCode does this internally anyway so you can end up with 2 indicator lines.
      • This extension can be used by itself, but it's recommended to use it alongside the built-in indent guides (setting editor.renderIndentGuides). These show thin grey lines on every indent, while this extension highlights the indent on the indent depth the cursor is currently on.
      • This is not needed when using Indent-Rainbow.
  • Highlighting
    • CSS Stacking Contexts
      • Highlights stacking contexts in CSS and ineffective z-index declarations.
      • This extension makes Stacking Contexts visible in CSS and SCSS, allowing you to write z-index declarations using small values with confidence.
      • What No One Told You About Z-Index, Philip Walton, Engineer @ Google
        • The problem with z-index is that very few people understand how it really works. It’s not complicated, but it if you’ve never taken the time to read its specification, there are almost certainly crucial aspects that you’re completely unaware of.
        • The key to avoid getting tripped up is being able to spot when new stacking contexts are formed. If you’re setting a z-index of a billion on an element and it’s not moving forward in the stacking order, take a look up its ancestor tree and see if any of its parents form stacking contexts. If they do, your z-index of a billion isn’t going to do you any good.
    • Color Highlight
      • Highlight web colors in your editor.
      • This extension styles css/web colors found in your document.
    • DotENV
      • Support for dotenv file syntax
      • Enables syntax highlighting in your .env files.
    • Rainbow CSV - Visual Studio Marketplace
      • Highlights columns in comma (.csv), tab (.tsv), semicolon and pipe with different colors for easy of reading.
      • VS Code Rainbow CSV Extension - Neutron Dev - Rainbow CSV extension will make your life easier if you're working with CSV and TSV files.
  • Highlighting (Errors)
    • Error Lens
      • Improve highlighting of errors, warnings and other language diagnostics.
      • Puts the error message in the code and optionally you can enable matching gutter icons.
      • usernamehw/vscode-error-lens | DeepWiki - Error Lens is a VS Code extension that enhances the display of diagnostic information (errors, warnings, info, and hints) by providing rich visualizations directly in the editor. This document provides a technical overview of the extension's architecture, components, and data flow.
      • Gutter Icons
        • When enabled - show gutter icons representing the severity level (error, warning, info, hint) of diagnostics at specific line locations. (In place of the debug breakpoint icon)
        • Demo
        • Icons not appearing
          • They need enabling after you install the extension.
          • Error Lens: Gutter Icons Enabled 
            "errorLens.gutterIconsEnabled": true
    • Error Highlighter Pro
      • Enhanced error highlighting with context - highlights errors, warnings, and their surrounding lines for better visibility
  • End of Lines (EOL)
    • VS Code doesn't have a native way to show line endings on each line, but you can use an extension.
    • Render Line Endings
      • Renders end of line characters (`CR`, `LF`, `CRLF`) when whitespace rendering is on.
      • This plugin treats EOL as whitespace and also respects the value of editor.renderWhitespace , thus this setting leads to different displays of whitespace/EOL.
      • editor.renderWhitespace = `trailing` is a good option to use.
      • Command to toggle Whitespace/EOL display 
        View: Toggle Render Whitespace
      • The standard EOL is taken from files.eol which is handled like any other VSCode setting (i.e. User --> Workspace overrides).
      • EOL Character Colour
        • Currently there is no setting built in to this extension to be able to change the EOL character's colour, this is soley done by the theme you are currenty using. However we can override the theme's settings.
          • Edit the settings.json (User / Workspace depending on your requirements, if unsure just use the user settings)
            • Settings --> User/Workspace --> Workbench --> Appearance --> Color Customizations --> Edit in settings.json
            • Add the following 
              "workbench.colorCustomizations": {
    "errorForeground": "#ffff00",
    "editorWhitespace.foreground": "#F00000"
},
            • You can just edit the file manually if you know what you are doing.
        • Added color customization in the new version 
          {
    "code-eol.colors.default.foreground": "#007000",
    "code-eol.colors.error.foreground": "#700000",
}
    • code-eol 2022 (Line Endings)
      • This shows newline (technically end-of-line) characters, similar to Atom or Notepad++. There's also the option to show some line endings with an error-color if you want to avoid a particular kind of line ending.
      • This is a fork of sohamkamani with extra features such as colourisation of the EOL characters.
    • code-eol (sohamkamani)
      • Display newline characters in your code
      • When enabled, this will render the EOL characters at the end of each line.
      • You can set the EOL character colour.
      • This is the orginal plugin that has been forked a few times.
Code Formatting (Beautifying)

These will change the codes formatting but not the content.

  • Formatters
    • Combined/Multiple Languages
      • Biome
        • See this plugin in the Linters section for more information.
        • The Biome extension for Visual Studio Code brings first-class support for Biome in VS Code and VS Code-based editors.
        • By integrating with Biome's language server, the extension provides the following features:
          • Format on save
          • Code refactoring
          • Inline suggestions and quick fixes
      • Prettier
        • This is not the actual software, but just an extension so it can be used in VSCode.
        • Code formatter using Prettier
        • "editor.formatOnSave": true executes this extension on save formatting your code automatically.
        • Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.
        • This extension will honour some settings in .editorconfig including end of line (EOL).
        • This formatter does not support PHP out of the box, but you can use a plugin to add this functionality.
        • Official
        • Installing
        • PHP Plugin
      • Prettier ESLint
        • A Visual Studio Extension to format JavaScript and Typescript code using prettier-eslint package
        • Prettier might now have JavaScript and TypeScript support built in, in which case this extensions would not be needed.
        • What does this extension do? some newbie questions · Issue #267 · idahogurl/vs-code-prettier-eslint · GitHub
          • Q: Does Prettier not support JavaScript and TypeScript out of the box?
          • A: Yes, it does; however, getting ESLint and Prettier to work in the same project causes some issues. You'll format with Prettier and end up with linting errors. prettier-eslint fixes this issue by formatting your code via prettier, and then passing the result of that to eslint --fix.
          • Q: Can these not be installed globally? as mentioned here on the same page
          • A: There have been issues with some global installations. Sometimes it works and other times it does not.
      • Prettiest ESLint Formatter
        • A code formatter for opinionated developers
        • Prettiest ESLint combines Prettier and ESLint to provide a more flexible and powerful code formatting experience.
        • First Prettier formats your code followed by ESLint in "fix" mode on the Prettier-formatted code.
        • This allows you to use Prettier's formatting rules as a base, then layer on additional rules and customizations with ESLint.
      • JS Beautify
        • A little wrapper around js-beautify for conveniently beautifying CSS/HTML/JS files.
        • Manually run this when required.
      • codepolish
        • CodePolish is a Visual Studio Code extension that lets you beautify and minify HTML, CSS, JavaScript, JSON, and JSONL code with ease.
        • Beautify by pressing: Alt+Shift+B
        • Minify via right-click.
    • Javascript
    • PHP
      • PHP Formatter - pretty-php
        • The opinionated PHP code formatter, now with full PHP 8.4 support
        • Inspired by Black, pretty-php aims to produce the smallest diffs possible and for code to look the same regardless of the project you're working on, eliminating visual dissonance and improving the effectiveness of code review.
        • Aside from using it in VS Code, you can run pretty-php from the command line, add it to your CI workflows, pair it with your preferred linter, and more.
      • Format HTML in PHP
        • Provides formatting for the HTML code in PHP files using JSbeautify - Works well paired with a PHP formatting extension.
        • This provides functionality that Prettier does not do.
    • Python
      • Black Formatter
        • Formatting support for Python files using the Black formatter.
        • This extension includes support for all actively supported versions of the Python language.
        • By Microsoft.
        • GitHub - psf/black
          • The uncompromising Python code formatter. Contribute to psf/black development by creating an account on GitHub.
          • Black is the uncompromising Python code formatter. By using it, you agree to cede control over minutiae of hand-formatting. In return, Black gives you speed, determinism, and freedom from pycodestyle nagging about formatting. You will save time and mental energy for more important matters.
          • Blackened code looks the same regardless of the project you're reading. Formatting becomes transparent after a while and you can focus on the content instead.
          • Black makes code review faster by producing the smallest diffs possible.
  • Editor Setup
    • EditorConfig for VS Code
      • EditorConfig Support for Visual Studio Code
      • VSCode does not support coding styles specified in .editorconfig file, out of the box.
      • This plugin attempts to override user/workspace settings with settings found in .editorconfig files. No additional or vscode-specific files are required. As with any EditorConfig plugin, if root=true is not specified, EditorConfig will continue to look for an .editorconfig file outside of the project.
      • Limited property support.
      • Some changes are done when the file opens and some when the file is saved
        • i.e. Line endings are only changed on save.
      • This is an official VSCode pluging from editorconfig.org
      • You can create the .editorconfig file directly in VSCode by right-clicking in the folder structure and selecting the option to generate it.
      • What options are advised and what are enforced by this extension? / Exisiting indentations are not updated to match the .editorconfig settings
        • VSCode Makefile `spaces` not converted to `tab` on save · Issue #347 · editorconfig/editorconfig-vscode · GitHub
          • The following settings are only advisories to the editor and are only applied by the editor going forwards. It will not affect any current indentations etc.. This what Prettier and other formatters are for, which will also read the settings from the .editorconfig
            • indent_style
            • indent_size
            • tab_width
        • Extension ignores editor.formatOnSave setting · Issue #453 · editorconfig/editorconfig-vscode · GitHub
          • That's the intended behavior, but I agree that it might not be the best UX. I'll look into that.
        • Will spaces automatically converted? · Issue #227 · editorconfig/editorconfig-vscode · GitHub
          • This extension doesn't currently do any conversions. It just enforces future input.
          • Honestly, I don't think we should be doing anything fancy. Just let the editor do its job. EditorConfig is more about setting the editor's settings to the appropriate settings, which this extension does quite well.
        • Explanation / TL;DR
          • Currently only these actions are performed on save, "editor.formatOnSave" is ignored for these
            • end_of_line (on save)
            • insert_final_newline (on save)
            • trim_trailing_whitespace (on save)
          • These options are only notifications to the editor to set the projects formatting preferences. They do not retro actively change anything.
            • indent_style
            • indent_size
            • tab_width
          • So it looks like these options will never be imlemente in the VSCode Extension.
          • Use of Prettier or Biome is the way forward using the "Format on save" feature as these respect the editorconfig.
        • The VSCode plugin is basic and indent conversion would require a lot of coding.
  • End of Lines (EOL)
    • Auto Convert End Of Line - Visual Studio Marketplace
      • Automatically convert files with configured end-of-line sequence
      • Every time a text files is opened, it converts all the EOL sequences into the specific one from the files.eol configuration, and displays an auto-dismissed notification. If no conversion is needed, or if files.eol is configured to be "auto", this extension does nothing.
      • This extension ignores new untitled files, which are already taken care of by the files.eol configuration.
    • Change All End Of Line Sequence - Visual Studio Marketplace
      • Runs the built-in 'Change End Of Line Sequence' on all files of a specified type in a workspace, leaving them open and unsaved.
  • Indentation
    • Python Indent
      • Correct Python indentation
    • Paste and Indent
      • This extension adds limited support for pasting and indenting code. Much like SublimeText's paste_and_indent.
      • This plugin will try and match the code you are pasting in with the current indentation level of your code.
    • Sass (.sass only)
      • Indented Sass syntax Highlighting, Autocomplete & Formatter
      • This extension is for only for .sass files, .scss support is built into vscode by default.
    • Indent 4-to-2
      • Convert indentation from tab or 4 spaces into 2 spaces.
Code Formatting (Minifying)

Minifying refers to the process of reducing the size of files, such as JavaScript, CSS, and HTML, by removing unnecessary characters like whitespace and comments without affecting functionality.

  • Nu-Minify - Visual Studio Marketplace
    • Minify for VS Code. Minify with command, and (optionally) re-minify on save. Minify | HookyQR minify fork with ES6+ support.
    • Supports JS, CSS, HTML.
  • JS & CSS Minifier Tool and Compressor
    • Minify CSS and JS locally within Visual Studio Code.
    • The CSS & JS Minifier extension for Visual Studio Code allows you to minify CSS and JavaScript files directly from the editor.
  • codepolish
    • CodePolish is a Visual Studio Code extension that lets you beautify and minify HTML, CSS, JavaScript, JSON, and JSONL code with ease.
    • Beautify by pressing: Alt+Shift+B
    • Minify via right-click.
Code Quality

These tools can combine Linters, Formatters, Static Analysis and Security into one.

  • Trunk Code Quality
    • Automated Code Quality for Teams: universal formatting, linting, static analysis, and security
    • Trunk Code Quality runs 100+ tools to format, lint, static-analyze, and security-check dozens of languages and config formats. It will autodetect the best tools to run for your repo, then run them and provide results inline in VSCode.
    • Trunk | CI Reliability Platform To Keep CI Green - Eliminate flaky test failures and merge bottlenecks at scale
    • Free and Pro: Trunk Code Quality is free for individual use, free for open source projects, and has a free tier for team use in private repos (See pricing).
  • Dead Code Hunter
    • Detect dead code, errors, and warnings.
    • Dead Code Hunter is a Visual Studio Code extension designed to help developers track and manage unused code in their projects.
    • It integrates with the VS Code diagnostic system to detect errors, warnings, and dead code (unused variables and functions) across your files and lists them in an easy-to-navigate panel.
    • This allows you to quickly identify and clean up unused code, making your project more efficient and maintainable.
Code Manipulation (Text)

This section is all about making actual changes to the text/code content and not how it looks.

  • Tags
    • Auto Rename Tag
      • Auto rename paired HTML/XML tag
      • Automatically rename paired HTML/XML tag, same as Visual Studio IDE does.
      • This will change the start and end tag instead of just the one you edit, so basically you are editing the pair in one go.
      • VSCode setting Editor: Linked Editing only works for HTML files.
      • From 1.44, VS Code offers the built-in auto update tags support for HTML and Handlebars that can be enabled with the setting editor.linkedEditing. If this setting is enabled, this extension will skip HTML and Handlebars files regardless of the languages listed in auto-rename-tag.activationOnLanguage
    • Auto Close Tag
      • Automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text does.
      • From VS Code 1.16, it has built-in close tag support for HTML, Handlebars and Razor files. This extension is enabled for other languages like XML, PHP, Vue, JavaScript, TypeScript, JSX, TSX and so on. It is configurable.
  • Case
    • change-case
      • Quickly change the case (camelCase, CONSTANT_CASE, snake_case, etc) of the current selection or current word.
    • Multiple cursor case preserve
      • Preserves case when editing with multiple cursors.
      • Have you ever tried to change a single word in all variable names, but had your camelCase broken? This extension preserves selection case in these situations. It recognises CAPS, Uppercase and lowercase. Works for typing or pasting.
  • Lines
    • Permute Lines
      • Lets you reverse or shuffle lines of code or filter for unique lines.
    • Sort lines
      • Sorts lines of text.
      • Many options.
  • Misc
    • Code Spell Checker
      • Spelling checker for source code.
      • A basic spell checker that works well with code and documents.
      • The goal of this spell checker is to help catch common spelling errors while keeping the number of false positives low.

 

Code Licensing
  • License Injector
    • License Injector injects a license into your project and information headers into your code.
    • License Injector was born of necessity and laziness. If you ever have to add license information to all of your source files, you understand the painful monotony of copying and pasting the correctly formatted comment string to the top of every file. Next time, use License Injector to do the work for you!
    • Old
  • Choose a License
  • licenser
    • Inserts license header in source files and creates license file.
    • This extension provides shortcuts to insert license headers to source code files and to create a LICENSE file based on the configurations in settings.json. This extension not only provides shortcuts but also enables auto-insertion of license header on creation of new file.

 

Package Managers
  • Composer
    • All-in-One composer integration, quick actions, commands, automatic installation, tasks, code lenses, diagnostics, and composer.json IntelliSense.
    • Composer "All-in-One" provides complete integration of composer and packagist into Visual Studio Code.
    • The extension provides quick composer commands, IntelliSense for composer.json, code lenses, code actions, schema validation, browsing and searching packages, checking abandoned packages, running user scripts, and it extends VS Code with composer tasks.
    • To use this extension, the compser binaries need to be installed.
      • Download the Windows installer and run.
      • You can also use this installer to do an upgrade of your current composer binary.
    • Official Composer Sites
    • Other Links
    • Files Installed here 
      C:\ProgramData\ComposerSetup\bin\
C:\Users\<username\AppData\Roaming\Composer\
    • Notes on Composer
      • I think you can either use the installer or composer itself, to upgrade it's binary.
    • Delayed Expansion
    • Getting Started
      • Create a composer.json in the root of your workspace.
      • Reboot vscode to properely recognise the composer.json as a composer file and not a standard json.
        • You should not need to do this, but I found I did.
      • Command Pallete:
        • Type: Composer: require package
        • Type: The package name you want (e.g. mikepultz/netdns2)
        • The composer.json will be updated to reflect this installation.
        • The packae will now be automatically installed in the the `../vendor/` directory
      • Add this code to your app so the packages will autoload 
        require __DIR__ . '/vendor/autoload.php';
    • This VSCode extenion has many commands avaiable in the palette
  • Composer Visual Manager
    • A visual interface for managing PHP Composer dependencies directly from VS Code.
    • Manage your PHP Composer dependencies visually. Install, update, remove, and audit packages without leaving VS Code.
Package Files
  • Keep a Changelog
    • An extension that provides snippets for markdown files to create a changelog with the ruleset of Keep a Changelog.

Data

SQL Databases
  • SQL Server (mssql)
    • Design and optimize schemas for SQL Server, Azure SQL, and SQL Database in Fabric using a modern, lightweight extension built for developers.
    • This extension is designed to empower developers by providing a seamless and modern database development experience. Our goal is to make SQL development more productive and intuitive by integrating essential features such as schema management, query execution, and AI-powered assistance.
  • SQL Database Projects
    • Enables users to develop and publish database schemas for MSSQL Databases.
  • Data Workspace
    • This extension is bundled into the SQL Server (MSSQL) extension for VS Code and is required by the SQL Database Projects extension. It will be installed automatically when those extensions are updated or installed.
  • SQLite Viewer
    • A quick and easy SQLite viewer for VS Code, inspired by DB Browser for SQLite and Airtable.
  • SQL Bindings
    • Enables users to develop and publish Azure Functions with Azure SQL bindings.
Data Handling
  • JSON
    • Sort JSON objects
      • Sorts the keys within JSON objects
    • Paste JSON as Code
      • Copy JSON, paste as Go, TypeScript, C#, C++ and more.
      • Interactively generate types and (de-)serialization code from JSON, JSON Schema, and TypeScript
Data Science

Nothing here yet

Source Control / SCM Providers

Git
  • Management
  • Visualization
    • GitLens
      • Visualize code authorship at a glance via Git blame annotations and CodeLens, seamlessly navigate and explore Git repositories, gain valuable insights via rich visualizations and powerful comparison commands, and so much more
      • Enhance your workflows with powerful Git functionality like in-editor blame annotations, hovers, CodeLens, and more—all fully customizable within VS Code. Try GitLens Pro's advanced workflows that accelerate PR reviews, provide rich interactive Git actions, and enhance collaboration for you and your team.
      • Launchpad
        • Launchpad is your centralized PR hub in VS Code where you can spot bottlenecks, prioritize reviews and unblock your team. With Worktrees, you can work on multiple branches—hotfixes, features, or experiments—without disrupting your workspace.
        • Try the new Launchpad (Preview) · gitkraken/vscode-gitlens · Discussion #3286 · GitHub
          • We're excited to introduce "Launchpad," accessible now in GitLens via "Open Launchpad" command.
          • The new Launchpad is categorized and gives you info at a glance on the state of your PRs, which helps you prioritize and pick the best ones to take action on, without interrupting your coding workflow.
          • Adds "Launchad" button at the bottom
      • GitLens Editions: Community and Pro
    • Git Graph (mhutchie)
      • View a Git Graph of your repository, and perform Git actions from the graph. Configurable to look the way you want!
      • This is the orginal Git Graph extension but it has not been updated in 4 years.
    • Git Graph v3
    • GitHub - hansu/vscode-git-graph
    • GitLG - Visual Studio Marketplace
      • GitLG, previously known as "git-log--graph", is a free, customizable Git UI.
      • A Git graphing extension written from scratch.
    • Git History (Don Jayamanne)
      • View git log, file history, compare branches or commit.
      • 14M Installs
    • Git History (Guodong Sun)
      • Git history panel in your VS Code
      • 73K Installs
    • Git History Diff
      • View git history. View diff of committed files. View git blame info. View stash details.
    • Interactive Git Log
      • The Ultimate Git GUI for VSCode
      • Interactive Git Log (IGL) shows exactly what matters - your uncommitted changes and the branch history that impacts them—so you can commit, rebase, and ship code blazing fast without ever touching the terminal.
      • Interactive Git Log (Homepage) - Interactive Git Log (IGL) is the most powerful Git GUI for VSCode, streamlining and enhancing your interaction with Git repositories.
    • Git Blame
      • See Git Blame information in the status bar.
  • .gitignore
    • Templates
      • .gitignore Generator
      • gitignore (CodeZombie)
        • Lets you pull .gitignore templates from the https://github.com/github/gitignore repository.
        • Language support for .gitignore files and assists you in working with .gitignore files.
      • YAGI - Yet Another GitIgnore
        • Smart .gitignore generator with auto-detection, template preview, and intelligent suggestions
        • A powerful Visual Studio Code extension that simplifies creating and managing .gitignore files for your projects. YAGI fetches up-to-date templates for various languages, frameworks, tools, and environments using the Toptal gitignore API.
      • Add gitignore
        • A VS Code extension that simplifies the integration of .gitignore files.
        • Choose from a vast collection of templates directly from github/gitignore, and seamlessly integrate or extend them in your projects.
    • Right Click
      • gitignore
        • Add a file or folder to .gitignore by right clicking on them.
        • Treats \n as a non empty line, so adds new entries below which then leaves an empty line.
        • There is no repo so cannot report this issue above
      • Global Gitignore
        • Add files and folders to global or local gitignore.
        • This VS Code extension adds 3 context menu items to the file explorer.
          • "Add to Global Gitignore"
          • "Add to Gitignore"
          • "Add to .git/info/exclude"
      • Add to GIT Ignore
        • Adds files to .gitignore or .git/info/exclude
        • Add files or general patterns based on their filename to .gitignore or .git/info/exclude.
        • This is useful for more finegraind additions.
      • ignore "g" it
        • A simple way to update .gitignore from UI.
        • Add/Remove a (file|directory|extension) from .gitignore via the VSCode UI.
        • Old and only 1 release. I have not tried this yet but the functionality is ideal.
        • Adds quite a lot of menu items
      • Gitignore Adder
        • Add selected directory or file to the .gitignore easily.
        • Has potential but does not use the correct path for windows folders.
      • gitignore (Shreyas Sarve)
        • Extension helps you to add files/folder to gitignore on single click.
        • The extensinons needs enabling first.
        • Has potential but does not use the correct path for windows folders.
    • Managers / Editors
      • GitIgnore Assistant (I use this one for my right clicks.)
        • Easily add, remove, or clean entries in your .gitignore by right clicking a file or folder in the Explorer.
        • While editing the workspace .gitignore file, Clean .gitignore is available in the editor context menu.
        • Other features such as duplicate detection are available.
        • This extension operates on the .gitignore file located at the root of the workspace. It does not manage .gitignore files in subfolders or handle global Git ignore files.
      • Gitignore Helper
        • Essential helper tools for managing .gitignore files
        • Gitignore Helper is the ultimate Visual Studio Code extension for managing your .gitignore files.
        • From a powerful Visual Editor with intelligent autocomplete to right-click context menu integration, this tool streamlines every aspect of git ignore management.
      • Git Exclude with panel
        • Add files to .git/info/exclude directly from the context menu
        • A powerful VS Code extension to manage your local git exclusions (.git/info/exclude) without polluting the shared .gitignore. Perfect for local configuration files, secrets, logs, and temporary test files.
        • While .gitignore is great for project-wide ignore patterns shared with your team, sometimes you need to ignore files only on your machine.
        • The .git/info/exclude file works exactly like .gitignore but is never committed.
GitHub
  • GitHub Repositories
    • Remotely browse and edit any GitHub repository
    • The GitHub Repositories extension lets you quickly browse, search, edit, and commit to any remote GitHub repository directly from within Visual Studio Code.
    • Remote Repositories - Blog | Visual Studio Code
      • Remotely browse and edit a source control repository from within Visual Studio Code.
      • The new Remote Repositories extension, published by GitHub, makes the experience of opening source code repositories in VS Code instant and safe. With this, you can quickly browse, search, edit, and commit to any remote GitHub repository (and soon, Azure Repos) directly from within VS Code, no clone necessary!
      • Probably really good for making small and quick changes to someone elses repo.
    • Remote Repositories
      • This is required as part of the GitHub Repositories extension installation.
      • Remotely browse and edit git repositories
      • The Remote Repositories extension integrates with the GitHub Repositories and Azure Repos extensions, allowing you to quickly browse, search, edit, and commit to remote git repositories directly from within Visual Studio Code.
      • This extension was previously part of the GitHub Repositories extension.
  • OpenSource Explorer
    • Explore GitHub repositories directly from VSCode with advanced search and filtering capabilities.
  • GitHub Pull Requests
    • Pull Request and Issue Provider for GitHub.
    • This extension allows you to review and manage GitHub pull requests and issues in Visual Studio Code.
    • Pull Requests in VS Code - YouTube | Visual Studio Code - Learn about the Pull Requests & Issues Extension in Visual Studio Code!
    • Manage GitHub Issues from Visual Studio Code | Leonardo Montini
      • From Visual Studio Code you can manage issues on GitHub without leaving the editor!
      • Excellent getting started video and a well laid out article on how to use this extension.
    • VS Code tips - The Github Pull Requests extension - YouTube | Code 2020 - View and manage Github pull requests directly in VS Code. Leave comments, checkout the changes locally, and merge the PR once everything looks good
    • Queries
      • Queries use the GitHub search syntact with a couple of VSCode constants (eg: ${user}/${owner}/${repository})
      • Using query parameters to create a pull request - GitHub Docs
        • Use query parameters to create custom URLs to open pull requests with pre-populated fields.
        • This lists Query parameters.
      • Filtering and searching issues and pull requests - GitHub Docs - To find detailed information about a repository on GitHub, you can filter, sort, and search issues and pull requests that are relevant to the repository.
      • Adding Additional Queries in the Issues View
        • In issues, hover over an item and it will bring up a pencil icon
        • Click on the pencil and this will bring up the command palette with some suggested commands.
        • Use these commands to edit or add new views etc..
        • Adding a new query allows you to do custom "views" in the issues view.
      • Example Issue Query to only show issues from a spcific milestone from the current project 
        {
    "label": "3.1.4 Milestone",
    "query": "state:open repo:${owner}/${repository} sort:updated-desc milestone:3.1.4"
},
  • GitHub Actions
    • The GitHub Actions extension lets you manage your workflows, view the workflow run history, and helps with authoring workflows.
  • GistPad
    • Manage your code snippets and developer notes using GitHub Gists and repositories.
    • GistPad is a Visual Studio Code extension that allows you to edit GitHub Gists and repositories from the comfort of your favorite editor. You can open, create, delete, fork, archive, and star gists/repositories, and then seamlessly begin editing files as if they were local, without ever cloning, pushing or pulling anything. It's like your very own developer library for building and referencing code snippets, commonly used config/scripts, programming-related notes, knowledge bases and interactive samples.
Misc
  • Visual Code Time Machine
    • Track and revert every change in your workspace without Git.
    • Visual Code Time Machine is a VS Code extension that automatically captures every change in your workspace, allowing you to jump back to any point in time with a single click.

External Platforms

Containers and VMs
  • Docker
    • This Docker extension makes it easy to build, manage, and deploy containerized applications from Visual Studio Code. It also provides one-click debugging of Node.js, Python, and .NET inside a container.
  • Dev Containers
    • Open any folder or repository inside a Docker container and take advantage of Visual Studio Code's full feature set.
Remote Development Servers
  • Remote - SSH
    • Open any folder on a remote machine using SSH and take advantage of VS Code's full feature set.
    • This lets you use any remote machine with an SSH server as your development environment. 
  • Remote - SSH: Editing Configuration Files
    • Edit SSH configuration files
    • This extension complements the Remote - SSH extension with syntax colorization, keyword intellisense, and simple snippets when editing SSH configuration files.
    • If you already have an extension that provides this functionality, you can disable this extension.
Telemetry
  • New Relic CodeStream
    • Bring production telemetry into your IDE to quickly identify and resolve performance issues.
    • Has a free tier that is generous, pricing for the paid plans is very expensive and can esculated quickly.
    • You have to sign up even to watch the promo video.
    • This does require a `New Relic` account but as mentioned there is a free tier.
    • New Relic | Monitor, Debug and Improve Your Entire Stack - Get Instant Observability with New Relic One and Quickstarts that make it easy to instrument in a few clicks.
    • what is new relic - Bing Search
      • New Relic is a cloud-based observability platform that helps website and application owners track the performance of their services. It provides full-stack monitoring, allowing users to monitor applications, infrastructure, and web browsers on a single platform in real-time. New Relic enables developers to analyze and optimize their software systems, offering a holistic view from code to customer experience.
    • What Is New Relic, What Can It Be Used for + Benefits
      • New Relic is a SaaS that specializes in monitoring performance and availability. Check this article to learn what is new relic and how it works.
      • New Relic uses an agent – a short code installed within your web app or virtual private server. This agent gathers different performance data by instrumenting your web app at the code level.
      • Every monitoring task requires a dedicated agent. For instance, there are three separate agents for application, infrastructure, and browser monitoring.
      • New Relic will retrieve the data from the agent and display it on the dashboard.
    • What is New Relic? How does it work? New Relic features, importance, competitors, - DevOpsSchool.com
      • New Relic is a San Francisco, California-based technology company which develops cloud-based software to help website and application owners track the performances of their services.
      • New Relic is an observability platform that helps you build better software. You can bring in data from any digital source so that you can fully understand your system and how to improve it.
      • New Relic is an Application Performance Management (APM) used by teams for application monitoring. The idea is to maximize productivity and minimize downtime by monitoring application statistics that reflect overall application performance.
Cloud-hosted Development Enviroments / Cloud Development Platforms
  • GitHub Codespaces
    • GitHub Codespaces provides cloud-hosted development environments for any activity - whether it's a long-term project, or a short-term task like reviewing a pull request. You can connect to Codespaces from Visual Studio Code or a browser-based editor that's accessible anywhere.
    • Additionally, GitHub Codespaces brings many of the benefits of DevOps, which have typically been reserved for production workloads, like repeatability and reliability, to development environments. GitHub Codespaces is also personalizable to allow developers to leverage the tools, processes and configurations that they have come to love and rely on - truly the best of both worlds!
    • GitHub Codespaces is a cloud-based development environment that allows developers to create, configure, and manage their coding projects directly from a web browser or Visual Studio Code.
    • It provides a fully integrated development environment (IDE) hosted in the cloud. This allows developers to work on their projects without needing to set up a local development environment.
    • There is a free plan.
    • Codespaces documentation - GitHub Docs - Create a codespace to start developing in a secure, configurable, and dedicated development environment that works how and where you want it to.
    • What are GitHub Codespaces? - GitHub Docs - Learn about what GitHub Codespaces are.
    • GitHub Codespaces · GitHub
      • GitHub Codespaces gets you up and coding faster with fully configured, secure cloud development environments native to GitHub.
      • Has an intro video
    • A beginner's guide to learning to code with GitHub Codespaces - The GitHub Blog - When you’re new to coding, it’s easy to get stuck completing endless tutorials. You can apply what you’ve learned (and learn even more) through GitHub Codespaces. The best part is you don’t need a powerful computer to get started.
  • CodeSandbox
    • CodeSandbox support in VSCode
    • CodeSandbox is a cloud development platform that empowers development teams to code, collaborate, and ship projects of any size from any device in record time.
    • There is a free plan.

Sharing / Collaboration / Digital Nomad

There are many different ways to share you knowledge, information and code, this collection of extensions will address that.

Settings Sharing
  • Settings Sync
    • Synchronize Settings, Snippets, Themes, File Icons, Launch, Keybindings, Workspaces and Extensions Across Multiple Machines Using GitHub Gist.
  • Settings Repository
    • Sync VSCode settings, extensions, keybindings, and more to a git repository.
  • Project Recommended Settings
    • Recommend settings to project developers.
    • This extension is for developers who work in a team and want to promote VSCode settings to team members.
    • Adding settings to .vscode/settings.json enforces the settings to every user with the user having no way of overriding them. This extension provides a less intrusive way of promoting setting user by letting them load these settings to their User settings instead.
Live Collaboration
Code Sharing
  • Polacode
    • Polaroid for your code
    • Select the code you want a picture of for sharing, right click and Polacode will make a PNG image of the code for you to share as needed.
    • Makes a professional screenshot of your code. Looks great on twitter.
  • CodeTour
    • Allows you to record and playback guided tours of codebases, directly within the editor.
    • Excellent for making presentations for colleagues.
Content Presentation
  • Jupyter (Extension Pack)
    • Jupyter notebook support, interactive programming and computing that supports Intellisense, debugging and more. 
    • Complementary Extensions
      • Jupyter Notebook Renderers - Renderers for Jupyter Notebooks (with plotly, vega, gif, png, svg, jpeg and other such outputs)
      • VS Code Jupyter Notebook Previewer
        • An easy to use extension for previewing Jupyter Notebooks within VS Code
        • An extension for supercharging your Data Science workflow by previewing Jupyter Notebook within VS Code.
        • View graphs and interact with Plotly visualizations from within VS Code.
      • Jupyter Keymap
        • Jupyter keymaps for notebooks
        • This extension provides keymaps for notebooks in Visual Studio Code to match the keybindings in Jupyter Notebook.
        • This extension comes with the Jupyter extension for Visual Studio Code and can be disabled or uninstalled.
    • Official Sites
      • Project Jupyter | Home
        • The Jupyter Notebook is a web-based interactive computing platform. The notebook combines live code, equations, narrative text, visualizations, interactive dashboards and other media.
        • JupyterLab is the latest web-based interactive development environment for notebooks, code, and data. Its flexible interface allows users to configure and arrange workflows in data science, scientific computing, computational journalism, and machine learning. A modular design invites extensions to expand and enrich functionality.
        • Jupyter supports over 40 programming languages, including Python, R, Julia, and Scala.
        • Notebooks can be shared with others using email, Dropbox, GitHub and the Jupyter Notebook Viewer.
        • JupyterLab: A Next-Generation Notebook Interface
          • JupyterLab is the latest web-based interactive development environment for notebooks, code, and data. Its flexible interface allows users to configure and arrange workflows in data science, scientific computing, computational journalism, and machine learning. A modular design invites extensions to expand and enrich functionality.
      • Project Jupyter · GitHub - Interactive Computing.
      • GitHub - jupyter/notebook
        • Jupyter Interactive Notebook.
        • The Jupyter notebook is a web-based notebook environment for interactive computing.
      • Project Jupyter | JupyterHub
        • JupyterHub brings the power of notebooks to groups of users. It gives users access to computational environments and resources without burdening the users with installation and maintenance tasks. Users - including students, researchers, and data scientists - can get their work done in their own workspaces on shared resources which can be managed efficiently by system administrators.
        • JupyterHub runs in the cloud or on your own hardware, and makes it possible to serve a pre-configured data science environment to any user in the world. It is customizable and scalable, and is suitable for small and large teams, academic courses, and large-scale infrastructure.
      • Project Jupyter | nbviewer
        • A simple way to share Jupyter Notebooks. You can use nbviewer on this website by entering the location of a Jupyter Notebook to have it rendered on this site.
        • nbviewer is a web application that lets you enter the URL of a Jupyter Notebook file, renders that notebook as a static HTML web page, and gives you a stable link to that page which you can share with others. nbviewer also supports browsing collections of notebooks (e.g., in a GitHub repository) and rendering notebooks in other formats (e.g., slides, scripts).
        • nbviewer is written in Python and JavaScript.
    • My Notes
      • Based on iPython which is an enhanced shell with auto comlete and syntax highlighting.
      • IPython continues to exist as a Python shell and a kernel for Jupyter.
      • Is Python based.
      • WYSIWYG to easily build interactive pages/notebooks with livecode, graph plots and markdown text sections.
      • The "pages" are stored in notebook files with the extension ".ipynb"
      • These are used so you can show your prodomiently date/data science work to colleagues.
      • What is required
        • Python Server to run the Jupyter server.
        • Jupyter Notebook server is required to show the notebooks, not just edit them.
        • Relevant Python packages installed for the code you are going to run.
      • Jupyter Labs is the latest version of Jupyter Notebooks
      • Online versions of Jupyter: Google Colab, Kaggle Notebooks
      • Aimed at data scientists (who all seem to use Python).
      • To use other languages, such as PHP or C++, their kernels need to be installed in Python/Jupyter.
      • jupyter notebook media wiki - Bing Search
        • Jupyter Notebook is an open-source web application that allows you to create and share documents containing live code, equations, visualizations, and narrative text. It was developed as part of Project Jupyter, which was spun off from the IPython project in 2014 by Fernando Pérez and Brian Granger
        • The name "Jupyter" is a reference to the three core programming languages supported by Jupyter: Julia, Python, and R. The project aims to develop open-source software, open standards, and services for interactive computing across multiple programming languages
        • IPython continues to exist as a Python shell and a kernel for Jupyter, while the notebook and other language-agnostic parts of IPython moved under the Jupyter name
        • Jupyter supports execution environments (called "kernels") in several dozen languages, including Julia, R, Haskell, Ruby, and Python (via the IPython kernel)
        • Jupyter is financially sponsored by NumFOCUS, a nonprofit organization that supports open-source scientific computing projects
        • The project has gained significant popularity and adoption, with major cloud computing providers like Amazon, Google, and Microsoft integrating Jupyter Notebook or derivative tools into their platforms
        • In summary, Jupyter Notebook was developed by Fernando Pérez and Brian Granger as part of Project Jupyter, which aims to provide interactive computing tools for multiple programming languages, including Python
    • Documentation
      • Project Jupyter - Wikipedia
      • Jupyter Notebook Documentation — Jupyter Notebook 7.4.0 documentation
        • The Jupyter Notebook documentation site.
        • Jupyter Notebook is a simplified notebook authoring application, and is a part of Project Jupyter, a large umbrella project centered around the goal of providing tools (and standards) for interactive computing with computational notebooks.
        • A computational notebook is a shareable document that combines computer code, plain language descriptions, data, rich visualizations like 3D models, charts, graphs and figures, and interactive controls. A notebook, along with an editor like Jupyter Notebook, provides a fast interactive environment for prototyping and explaining code, exploring and visualizing data, and sharing ideas with others.
        • Jupyter Notebook is a sibling to other notebook authoring applications under the Project Jupyter umbrella, like JupyterLab and Jupyter Desktop. Jupyter Notebook offers a lightweight, simplified experience compared to JupyterLab.
    • Tutorials
      • Getting Started with Jupyter Notebooks in VS Code - YouTube | Visual Studio Code
        • In this video, you'll learn how to create your very first Jupyter Notebook in VS Code, including setting up your environment, running and debugging code, and visualizing data. Getting started with Jupyter Notebooks has never been easier!
        • VSCode supports Jupyter Notebooks natively.
        • You will need to install Python
      • Jupyter Notebook Complete Beginner Guide - From Jupyter to Jupyterlab, Google Colab and Kaggle! - YouTube | Rob Mulla
        • Jupyter notebooks and python notebooks are an important tool for data science. If you want to learn about them this is the ultimate jupyter notebook guide made in 2022. In this tutorial I try to provide everything you need to know to get started with notebooks. Jupyter notebook, jupyter lab, google colab and kaggle notebooks are all covered! Rob Mulla wil guide you though this tutorial.
        • Jupyter is a WYSIWYG
        • JupyterLab is the next generation of the notebook interface.
        • The Jupyter sysetm is now very popular you can run it in the cloud
      • How to Work in Jupyter Notebook with Multiple Languages | GeeksforGeeks
        • For using different kernels for different programming languages, we need to install the appropriate kernels for each language separately, then we can seamlessly switch between different languages within the same Jupyter Notebook itself. Let's now discuss how can we work in Jupyter Notebook with multiple languages.
        • Jupyter Notebook is a popular IDE (Integrated Development Environment) mostly used in Data fields.
        • If we want to work in Jupyter Notebook with multiple languages, we first need to install the kernels for the specific languages, it's also called Language-Specific-Kernels.
        • One way to install these kernels for different languages we can install kernels using package managers like pip (as we used it to install the Jupyter Notebook itself) or conda or by following language-specific instructions.
  • Data Wrangler
    • Data viewing, cleaning and preparation for tabular datasets.
    • Data Wrangler is a code-centric data viewing and cleaning tool that is integrated into VS Code and VS Code Jupyter Notebooks.
    • It provides a rich user interface to view and analyze your data, show insightful column statistics and visualizations, and automatically generate Pandas code as you clean and transform the data.
Social Media

Debugging and Testing

API Development
  • Postman
    • Streamline API development and testing with the power of Postman, directly in your favorite IDE.
    • The Postman VS Code extension enables you to develop and test your APIs in Postman directly from Visual Studio Code and Visual Studio Code Insiders.
  • REST Client
    • REST Client allows you to send HTTP request and view the response in Visual Studio Code directly.
    • Extensive instructions on the GitHub page
  • Thunder Client
    • Lightweight Rest API Client for VS Code
Debuggers
  • Console.Log
    • Turbo Console Log
      • Automating the process of writing meaningful log messages.
      • Turbo Console Log extension makes debugging much easier by automating the operation of writing meaningful log message.
      • Makes console.log messages much easier to use
    • Console Ninja
      • JavaScript console.log output and runtime errors right next to your code.
      • Console Ninja is a VS Code extension that displays console.log output and runtime errors directly in your editor from your running browser or node application. It's like your browser dev tools console tab or terminal output from your node app, but instead of having to context switch, values are connected to your code and displayed ergonomically in your editor.
      • Free and Paid versions.
    • Wrap Console Log Simple
      • Wrap to console.log(or any function name) by word or selection
      • Click a variable and it will make a console.log() function for logging.
  • Browser Integration
  • PHP
    • PHP Debug (Xdebug)
    • PHP Profiler - Visual Studio Marketplace
      • Support for PHP (Xdebug) profiling files and inspecting them.
      • Xdebug profile files (cachegrind format) can be opened, viewed, and inspected. The extension also highlights hot paths in your code, according to the profiling results. There is more, please see the features below for the details.
    • xdebug profiler viewer
      • A extension to view xdebug profiler files.
      • Turn Xdebug/Cachegrind profile files into actionable insights inside VS Code.
      • This extension opens your profiler in a visual interface, highlights hotspots, shows per-function change risk, and helps you find bottlenecks fast.
  • Python
    • Python Debugger
      • Python Debugger extension using debugpy.
      • A Visual Studio Code extension that supports Python debugging with debugpy. Python Debugger provides a seamless debugging experience by allowing you to set breakpoints, step through code, inspect variables, and perform other essential debugging tasks. The debugpy extension offers debugging support for various types of Python applications including scripts, web applications, remote processes, and multi-threaded processes.
  • JavaScript
    • JavaScript Debugger (Nightly)
      • An extension for debugging Node.js programs and Chrome.
      • This is a DAP-based JavaScript debugger. It debugs Node.js, Chrome, Edge, WebView2, VS Code extensions, Blazor, React Native, and more. It is the default JavaScript debugger in Visual Studio Code and Visual Studio, and the standalone debug server can also be used in other tools such as nvim.
      • The shipped version of VS Code includes the js-debug version at the time of its release, however you may want to install our nightly build to get the latest fixes and features.
  • Misc
    • Watch Expressions With Address
      • Quickly add variables with addresses to the Watch panel in VS Code debugging.
      • It works both from the Debug Variables Context Menu and by selecting variables directly in the editor.
Unit Testing / Testing
Running Code / Previewing
  • Code Runner
    • Run a code snippet or a code file for multiple languages: C, C++, Java, JavaScript, PHP, Python, Perl, Perl 6, Ruby, Go, Lua, Groovy, PowerShell, BAT/CMD, BASH/SH, F# Script, F# (.NET Core), C# Script, C# (.NET Core), VBScript, TypeScript, CoffeeScript, Scala, Swift, Julia, Crystal, OCaml Script, R, AppleScript, Elixir, Visual Basic .NET, Clojure, Haxe, Objective-C, Rust, Racket, Scheme, AutoHotkey, AutoIt, Kotlin, Dart, Free Pascal, Haskell, Nim, D, Lisp, Kit, V, SCSS, Sass, CUDA, Less, Fortran, Ring, Standard ML, Zig, Mojo, Erlang, SPWN, Pkl, Gleam, and custom command.
    • Run code snippets and files easily with just a highlight and a right click. It takes care of the compiling on the fly.
  • Live Preview (from Microsoft)
    • Hosts a local server in your workspace for you to preview your webpages on.
    • You cannot execute html in the VScode terminal so we can use this extension to open in a browser preview right in Visual Studio code right click on file and then `Show Preview`.
  • Live Server
    • Launch a development local Server with live reload feature for static & dynamic pages
    • Every time a bit of code is changed the live HTML page is refreshed.
    • Reloads the page when a JS, CSS or HTML file is updated.
Tools
  • Regex Match
    • Create, test and debug regular expressions in Visual Studio Code
    • Regex Match is a Visual Studio Code extension that enables dynamically creating, testing and debugging regular expressions within a text file. It provides a simple and user-friendly interface, making the process of working with regular expressions effortless and efficient.

CMS

Joomla
  • Joomla 5 Snippets for Visual Studio Code
    • Snippets for Joomla 4 and Joomla 5.
    • Supercharge your Joomla 4 and Joomla 5 development with "VSCode Joomla 4 and 5 Snippets"! Elevate your coding efficiency and unleash your creativity. Get ready to write Joomla code like a pro!
  • Joomla Snippets
    • Snippets for Joomla. Including Joomla 3.x and Joomla 4 Snippets.
    • All code snippets are based on and follow the Joomla style guide https://docs.joomla.org/Joomla_CodeSniffer.
    • This might be the old way as Joomla now uses PSR as-is.
WordPress

Uncategorised

  • vscode-pets
    • Pets for your VS Code
    • Puts a small, bored cat, an enthusiastic dog, a feisty snake, a rubber duck, or Clippy in your code editor to boost productivity.
    • Play with Pets in VS Code - Neutron Dev - Play around with your favorite virtual pets while coding exciting features.
  • Gitlantis - Visual Studio Marketplace
    • Transform your project into an explorable 3D world
    • Gitlantis transforms the way you explore your project files by turning your codebase into an immersive ocean world.
    • Navigate your folders and files by interacting with the floating lighthouses and buoys — it’s a unique, fun, and creative way to visually explore and manage your code.
  • Htaccess Tester
  • freeCodeCamp - Courses
    • Provides tooling for quick and easy selection of courses offered by freeCodeCamp.
    • freeCodeCampOS
      • freecodecamp-os is a tool for creating and running interactive courses within Visual Studio Code.
      • This is the documentation for the @freecodecamp/freecodecamp-os package.
      • The freecodecamp-os package is to be used in conjunction with the freeCodeCamp - Courses extension, for the optimal experience.
    • GitHub - freeCodeCamp/freeCodeCampOS - Test repo for external freeCodeCamp courses.

Security

Vulnerability Scanner Sites (Not all VSCode specific)

Research

  • Setups (Extensions and settings)
    • The ULTIMATE VS Code Setup - Extensions & Settings 2025 - YouTube | Devression
      • In this video, I’ll walk you through the best VS Code extensions, themes, settings, and AI tools that will help you write better code, customise your workflow, and maximise efficiency in 2025.
      • Settings: Increase interface size, Enable mini map, Change cursor blinking to "expand", Enable cursor smooth caret animation, Enable word wrap, Enable bracket pair colorization
      • Themes: palenight theme, Material Icon Theme
      • Extensions: Peacock, GitHub Copilot, Live Server, Docker, Prettier, GitLens, Import Cost, Code Runner, Remote SSH, Quokka, Live Share, Polacode, JavaScript Code Snippets, VS Code PDF, Rainbow CSV
      • One of the comments has all of the timestamps.
    • My Visual Studio Code Setup for Web Development - YouTube | ForrestKnight
      • My focus lately as a developer has been building websites & web apps, and VS Code is the main tool I use to get that done. It's the most popular IDE/code editor among developers, according to the 2022 Stack Overflow Developer Survey. So, I want to show you how I use VS Code, my preferred extensions, my current theme, and my favorite VS Code settings that I’ve been using for many different types of web development.
      • Extensions: vscode-icons, Prettier, ESLint, HTMLHint, Stylelint, Auto Rename Tag, Tabnine, Live Server, Document This, Doxygen Documentation Generator
      • Themes: Andromeda
    • How to set up VSCode like a PRO! - YouTube | Syntax  - this is a tutorial+ setup
      • Join Scott and Wes as they dish out the juiciest VSCode secrets for coding like a boss (or a Tolinski)! From speedy navigation to must-have extensions and the sickest themes, get ready to level up your coding game.
      • Extensions: Text Pastry, Better Comments, Auto Rename Tag, Change Case, Permute Lines, File Utils, Sort JSON objects, SQLite Viewer, Code Spell Checker, APC Customize U++
      • Themes: SyntaxFM, Cobalt2 Theme Official, Night Owl, Level Up
    • How to use VSCode Like a Pro (Senior Developer) - YouTube | CoderOne
      • We all love VSCode and work with it every day as developers, but do we actually use it as a Senior Developer? In this video, I'll show you Pro tips and tricks to unlock hiding and pro features of VSCode, from refactoring hundreds of lines of code in seconds to relaxing and doing YOGA using VSCode.
      • Check out a few themes to see which one you like best.
      • Make sure you use the command Pallet.
      • Profiles: These can have different settings and extensions for different scenarios
      • Extensions: Color Picker, Color Info, Color Manager, Docker, GitHub Copilot, GitLens, json, indent-rainbow, Prettier, TODO Highlight, vscode-styled-components, TypeScript Hero
      • Themes: Halcyon
    • How I Configure VS Code for Everything | by Aman Mittal | Better Programming - A Journey on sorting out what VSCode extensions to use.
      • This is the setup Aman now uses for his JavaScript, Node.js, React and React Native work. This has some nice setup steps with settings.
      • Extensions: :emojisense:, Bracket Pair Colorizer, Code Spell Checker, Code::Stats, ESLint, Indent 4-to-2, Express.js, markdownlint, GitHub Pull Requests, Import Costs, npm Intellisense, Path Intellisense, Pug, IntelliSense for CSS class names in HTML, React Native Tools, Todo Tree, Version Lens, Settings Sync, Word Count, Prettier
      • Themes: fairyFloss, Dracula Official, Night Owl, Material-Icon-Theme
  • Extensions Only
    • Visual Studio Code Extensions to Improve Your Productivity - YouTube | freeCodeCamp.org
      • Learn about 10 helpful VS Code extensions. These VSCode extensions could make you more productive as a developer.
      • Extensions: GitLens, LiveShare, Pieces, Better Comments, Turbo Console Log, Code Runner, Import Cost, Prettier, ESLint, Docker
    • VS Code extensions that I can't live without! - YouTube | Kevin Powell
      • I'm far from a VS Code power user, but that doesn't mean that I don't use a handful of extensions! As someone who writes primarily HTML and CSS, these are the ones that I find the most useful for my workflow.
      • Extensions: Bracket Pair Colourizer, Bracket Pair Colourizer 2, Live Server, Prettier, Auto Tag Rename, SVG Previewer
      • Themes: Atom One Dark, One Dark Pro
    • 26 Best VSCode Extensions for 2024 - YouTube | SkillCurb
      • In this comprehensive video we will go over the 26 best VSCode Extensions for 2024 . We have also broken down the extensions per category for you , so its easier to remember which one to use when.
      • Extensions: Prettier, Bracket Pair Colorization Toggler, Indent-Rainbow, Test Explorer UI, Jest Runner, Python Test Explorer, GitLens, Git History, Git Graph, Live Server, IntelliCode, Code Spell Checker, DevTools for Chrome App, Code Runner, Python Debugger, Peacock, Better Comments, ESLint, Polacode, Rainbow CSV, Codecrumbs, Tabnine, markdownlint
      • Themes: One Dark Pro, Material UI
    • 20 Essential VS Code Extensions In 2024 - YouTube | Traversy Media
      • 20 extensions for Visual Studio Code to increase your productivity.
      • Extensions: Prettier, Github Copilot, Live Server, Multiple Cursor Case Preserve, Git History, Git Lens, Code Runner, Markdown Preview Enhanced, Console Ninja, Regex Snippets, Polacode, Code Spell Checker, Document This, ChatGPT, Peacock, Postman, REST Client, Bookmarks, Codiumate/Codium AI, Quakka
    • 12 VS Code Extensions to INCREASE Productivity 2024 - YouTube | Devression
      • I made this video to help any newbies out there who are looking for some great VS Code extensions to help increase productivity and write cleaner code. I know there are PLENTY more extensions out there to try so if you guys have any suggestions, feel free to leave them in comments and I might make a video on them! In this video I cover the 12 best VS Code extensions that I use throughout my studies as a Computer Science student. I hope these tips and tricks help you!
      • Extensions: Code Runner, Tabnine, Live Server, Excel Viewer, CodeTour, TODO Highlight, Draw.io Integration, Polacode, Code Spell Checker, Prettier, Vibrancy Continued
      • Themes: Material Icon
    • The Best VSCode Extensions 2024 - YouTube | Coding With Adam
      • The best VSCode extensions. These are some of my favorite VSCode extensions that I use to increase my productivity. Checkout my video to learn more and see a demo of each extension.
      • Extensions: Prettier, Code Spell Checker, ESLint, Error Lens, Live Server, Auto Rename Tag, Peacock, Auto-Open Markdown Preview, Markdown All in One, Code Runner, Jest, Jest Runner, Simple React Snippets, GitHub CoPilot, InteliCode, YAML, GitLens, Git History, Git Graph, vscode-pets
      • Themes: Material Icon
    • My Visual Studio Code Setup: Extensions and Themes · Matthias Ott – User Experience Designer (en-US)
      • Matthias Ott is an independent user experience designer and developer from Stuttgart, Germany.
      • You can install extensions from the command line.
      • Extensions: Auto Close Tag, Better Comments, Bracket Pair Colorizer 2, Dash, EditorConfig for VS Code, ESLint, Git History, GitLens, Import Cost, Live Share, npm Intellisense, Path Intellisense, Permute Lines, PHP Intelephense, Prettier, Project Manager, SVG, Remote - SSH, Task Explorer, Twig Language 2, VS DocBlockr, Wrap Console Log Simple,
      • Themes: Night Owl (sarah.drasner)
    • Useful VS Code Extensions For Front-End Developers — Smashing Magazine
      • Meet useful Visual Studio Code extensions for web developers: little helpers to minimize slow-downs and frustrations, and boost developer’s workflow along the way.
      • There is awhole section snippets
      • This is an in-depth article and everything is well explained. Although some extensions are deprecated most of them are still valid today.
      • Extensions: Turbo Console Log, Import Cost, Prettier, --- loads of snippet plugins ---, Polacode, Better Comments, Debugger for Chrome, Microsoft Edge Tools for VS Code, File Utils, FileOps, vscode-icons, GitLens, Git History, Watermelon, TODO Highlight, Bracket Pair Colorizer, Gremlins Tracker, Indent-Rainbow, CSS Stacking Contexts, Peacock, IntelliCode, CodeTour, vscode-pets, Quokka, Remote - SSH, Live Sass Compiler
    • VS Code Extensions That'll Boost Your Development Productivity
      • Having a good text or code editor that fits into your workflow is crucial to productivity as a developer. VS Code comes stocked with a lot of features by default, but here are 7 extensions that will help take your workflow up another level.
      • Extensions: Sublime Text Keymap and Settings Importer, Import Cost, Indent-Rainbow, Rainbow Brackets, Settings Sync, Profile Switcher, Better Comments, Duplicate Action
    • How to configure Visual Studio Code right the first time - DEV Community
      • VS Code is a powerful tool but "batteries included" is not the expression this IDE is known for. Here's how to proceed to have the best developer experience.
      • Extensions: Auto Rename Tag, Bracket Pair Colorizer, Color Highlight, DotENV, ESLint, VS Code JavaScript (ES6) snippets, Prettier, Better Comments, Error Lens, GitLens, Live Server, npm Intellisense, Path Intellisense, Settings Sync, Code Spell Checker, Image preview, Kite Autocomplete for Python and JavaScript, Polacode, Sort lines
      • Themes: Night Owl, Cobalt2 Theme Official, Material Icon Theme
    • How I VSCode | Profile: Scott Watermasysk - a live list of his VSCode extensions.
    • How I VSCode | Profile: Stefan Natter - a live list of his VSCode extensions.

Fonts

TL;DR

  • My selected Font
    • Fira Code without ligatures enabled in VSCode.
    • Font size of 14.
  • VSCode Default Font
    • Editor: Font Size = 14
    • Editor: Font Family = Consolas, 'Courier New', monospace

Getting the right font for your workflow is just as important as your extensions and theme choice.

  • Ligatures
    • are a single character that is automatically used to replaces a symbol group such as === or =>
    • Transforms symbols like !==, =>, && into more readable glyphs.
    • Some people like these becasue they say it makes reading code easier.
    • In VSCode, ligatures are disable by default so you can use any font as a normal font.
  • Monospace font
    • This means each symbol takes the same amount of space as the next.
    • I a normal font different letters, symbols and numbers will take up different amounts of space. Consider M and N.
    • Ideal for code alignment and clarity.
    • Monospaced font - Wikipedia
  • VSCode Enable/Disable Ligatures
    • Settings --> (User/Workspace) --> Text Editor --> Font --> Font Ligatures
    • Default = false
    • The settings.json setting: 
      "editor.fontLigatures": false

My Curated List

These are all free unless otherwise stated.

  • Used (this is my rough preference list, 1 is best, please note these might change)
    1. Fira Code
      • A very popular font. If you use ligatures then this is your choice as it has lots.
      • Monospaced, ligatures for symbols, very popular among devs
      • Free monospaced font with programming ligatures
      • A great all-rounder
      • Ligature support
      • Free and open-source
      • Active community
      • Monospaced
      • Works flawlessly in VS Code, JetBrains IDEs, terminals, and browsers.
      • Huge Adoption: Frequently featured in developer blogs, tutorials, and screencasts.
      • VS Code Instructions · tonsky/FiraCode Wiki · GitHub
        • download zip from github repo
        • extract zip
        • select all fonts in `./ttf/` and click install (these do not have the internet flag because they are in a zip)
          • NB: I just choose to install for all users.
          • NB: You probably on need regular if using for an IDE
        • VSCODE User settings
          • via GUI:
            • `Editor: Font Family = Fira Code'
            • `Editor: Font Ligatures = Edit in settings.json`    (default = false)
          • via settings.json 
            "editor.fontFamily": "Fira Code",                       
"editor.fontLigatures": true,           // Default is false
      • Based on Fira Mono which was made by Mozilla in 2013 for their now obsolete Firefox OS.
    2. Commit Mono
      • Many settings and options so I will revisit this font later. This font offers options for the experienced developer who knows what he wants.
      • This is highly configurable font made possible by the configurator on the website. There is a defautl options font you can download.
      • Neutral programming typeface
      • Commit Mono is an anonymous and neutral coding font focused on creating a better reading experience.
      • Fira Code and JetBrains Mono were a huge inspiration and go-to for best practices for this font's creation.
      • Commit Mono uses an innovative technique to improve kerning. Kerning is crucial for efficient reading, but it’s not possible if you want a monospaced font. ‘Smart Kerning’ combats this by sliding letters to better spacing positions – all while preserving monospacing. This gives Commit Mono a superior reading experience compared to other monospaced fonts.
      • Does not have a huge range of ligatures.
    3. JetBrains Mono
      • A good solid font but I am not a fan of the bracket styling.
      • Designed for developers, great ligatures, good line spacing
      • Professional designed by JetBrains.
      • JetBrains Mono’s typeface forms are simple and free from unnecessary details. Rendered in small sizes, the text looks crisper.
      • Using the JetBrains Mono font in vscode | Christophe Avonture - Instructions on ow to install this font in to Window and VSCode.
      • JetBrains Mono is a font specifically designed for coding from the producers of WebStorm. 
    4. Monaspace
      • Monaspace was made with the goal of improving all code, for all developers. 
      • Many settings and options so I will revisit this font later.
      • The Monaspace type system is a monospaced type superfamily with some modern tricks up its sleeve. It consists of five variable axis typefaces. Each one has a distinct voice, but they are all metrics-compatible with one another, allowing you to mix and match them for a more expressive typographical palette.
      • Has Texture Healing
      • Monaspace includes code ligatures for a broad variety of programming language.
      • This has been developed by GitHub.
      • GitHub - githubnext/monaspace - An innovative superfamily of fonts for code
      • Releases · githubnext/monaspace · GitHub
        • After Cascadia Code added support for Nerd Fonts, we reached out to our colleagues at Microsoft to learn how to do it for ourselves. The key blocker was always legal, not technical. Nerd Fonts contain logos for a variety of companies — there are 11 glyphs which contain an Octocat or the GitHub wordmark across the various Nerd Fonts icon sets!
  • Default VSCode Fonts
    1. Consolas
      • Consolas is aimed for use in programming environments and other circumstances where a monospaced font is specified. 
      • The improved Windows font display allowed a design with proportions closer to normal text than traditional monospaced fonts like Courier. This allows for more comfortably reading of extended text on screen.
      • Consolas - Wikipedia
      • Made by Microsoft.
    2. Courier New
      • Designed as a typewriter face for IBM, Courier was re drawn by Adrian Frutiger for IBM Selectric series.
      • A typical fixed pitch design, monotone in weight and slab serif in concept. Used to emulate typewriter output for reports, tabular work and technical documentation.
      • Courier New - Courier (typeface) - Wikipedia
      • Made by Microsoft.
    3. Monospace
      • This has no listed font. Maybe this is just a placeholder
  • Not tried
    • Cascadia Code / Cascadia Mono
      • Microsoft's default font for terminals, has ligatures.
      • Ships with Windows Terminal.
      • This is a fun, new monospaced font that includes programming ligatures and is designed to enhance the modern look and feel of the Windows Terminal.
      • Not content with creating the world’s most popular free editor, VS Code, Microsoft has also developed the open-source Cascadia Code font, which is the default in Windows Terminal. 
      • This has 4 different version:
        1. Cascadia Code: standard version of Cascadia
        2. Cascadia Mono: a version of Cascadia that doesn't have ligatures
        3. Cascadia (Code|Mono) PL: a version of Cascadia that has embedded Powerline symbols
        4. Cascadia (Code|Mono) NF: a version of Cascadia that has Nerd Font symbols
    • Source Code Pro
      • Adobe's monospaced font, no ligatures, but very legible.
      • Professional and polished.
      • Source Code was designed by Paul D. Hunt as a companion to Source Sans.
      • Source Code Pro is a set of OpenType fonts that have been designed to work well in user interface (UI) environments.
    • Hack
      • Clean, minimalistic, highly readable, good fallback option
      • no-frills
      • very legible
    • mononoki
      • Designed specifically for programming, unique but readable.
      • A font for programming and code review.
    • Inconsolata
      • Aesthetic and readable, great for light themes.
      • Open-source monospace font for code listings.
    • Dank Mono
      • Stylish, very clean, paid font, popular in demos
      • A typeface designed for coding aesthetes with modern displays in mind.
      • Delightful ligatures and an italic variant and bold style.
  • Misc
    • Nerd Fonts
      • This Font is created by taking lots of icons fonts, combining them and then adding them into well known programming fonts.
      • Iconic font aggregator, collection, and patcher
      • Nerd Fonts patches developer targeted fonts with a high number of glyphs (icons). Specifically to add a high number of extra glyphs from popular ‘iconic fonts’ such as Font Awesome, Devicons, Octicons, and others.
      • 9,000+ glyph/icons, 60+ patched fonts: Hack, Source Code Pro, more. Popular glyph collections: Font Awesome, Octicons, Material Design Icons, and more
  • Other are available
    • There are more in the lists below, I just have not gone through them to add them into this list.

Research

 

 

 

 

 

Published in Programming
Read more...
Sunday, 03 November 2024 15:26

Which IDE or Text Editor should I use for my coding projects?

These are my notes I used to help me decide what IDE or Text Editor I should use for future project. Up until now I was using NetBeans so I though I would have look and see if this was still the best.

TL;DR = Use VSCode

  • Netbeans is great for Java and does PHP. Limit language support.
  • VSCode does all the languages, is far more popular, it can be a pain to setup everything using plugins but once that is done you have a powerful IDE.

IDE

These are the softwares you recognise that people use for programming, however it is not always the case.

  • WebStorm
    • The JavaScript and TypeScript IDE, by JetBrains
    • Make development more productive and enjoyable with WebStorm, the IDE for JavaScript and related technologies.
    • The JavaScript and TypeScript IDE
    • Goodbye VS Code - YouTube
  • PhpStorm
    • The PHP IDE by JetBrains
    • Explore the PhpStorm IDE for web projects. Get everything you need for PHP, JavaScript, and SQL coding out of the box
  • JetBrains Fleet
    • More Than a Code Editor
    • Built from scratch, based on 20 years of experience developing IDEs. Fleet uses the IntelliJ code-processing engine, with a distributed IDE architecture and a reimagined UI.
  • IntelliJ IDE
    • The Leading Java and Kotlin IDE by JetBrains
    • IntelliJ IDEA is undoubtedly the top-choice IDE for software developers. It makes Java and Kotlin development a more productive and enjoyable experience.
  • PyCharm
    • the Python IDE by JetBrains
    • The Python IDE for data science and web development with intelligent code completion, on-the-fly error checking, quick-fixes, and much more.
  • CLion
    • A Cross-Platform IDE for C and C++ by JetBrains
    • A powerful IDE from JetBrains helps you develop in C and C++ on Linux, macOS and Windows.
  • Apache NetBeans
    • Development Environment, Tooling Platform and Application Framework.
  • Visual Studio
    • IDE and Code Editor for Software Developers and Teams
    • The most comprehensive IDE for .NET and C++ developers on Windows. Fully packed with a sweet array of tools and features to elevate and enhance every stage of software development.
    • Visual Studio 2022 Community Edition – Download Latest Free Version - Try our free, fully-featured, and extensible IDE for creating modern developer apps for Windows, Android, & iOS. Download Community for free today!
  • Eclipse IDE
    • The Eclipse Foundation
    • The Leading Open Platform for Professional Developers.
  • Geany
    • The Flyweight IDE
    • Geany is a powerful, stable and lightweight programmer's text editor that provides tons of useful features without bogging down your workflow. It runs on Linux, Windows and macOS, is translated into over 40 languages, and has built-in support for more than 50 programming languages.
  • CodeLobster
    • Free portable cross-platform PHP IDE
    • Free portable cross-platform PHP IDE with support Drupal, Smarty, Twig, WordPress, Joomla, JQuery, CodeIgniter, HTML, CSS, JavaScript, TypeScript, AngularJS, CakePHP, Python, Laravel, Phalcon, Symfony, Yii
    • Free version is crippled

Text Editor

Just because they are called a Text Editor does not mean they do not offer the full gamut of features an IDE does but rather to add these features you need to use plugins. However text editors like Nano are not included in the list because that is all they do.

  • Visual Studio Code
    • Code Editing. Redefined
    • Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favourite platform - Linux, macOS, and Windows.
    • A standalone source code editor that runs on Windows, macOS, and Linux. The top pick for JavaScript and web developers, with extensions to support just about any programming language.
    • My VSCode Notes | QuantumWarp
  • Cursor
    • The AI Code Editor
    • Fork of VSCode and instroduces AI with other fixes
  • Notepad++
    • Notepad++ is a free (as in “free speech” and also as in “free beer”) source code editor and Notepad replacement that supports several languages.
  • VIM
  • NeoVIM
  • Zed
    • The editor for what's next
    • Zed is a high-performance, multiplayer code editor from the creators of Atom and Tree-sitter.
    • Zed is a next-generation code editor designed for high-performance collaboration with humans and AI.
    • Code with LLMs
    • Zed adds a uniquely powerful interface for AI-assisted programming.
  • Sublime Text
    • Text Editing, Done Right
    • Available on Mac, Windows and Linux
  • Brackets
    • A modern, open source code editor that understands web design.
    • Brackets is a lightweight, yet powerful, modern text editor. We blend visual tools into the editor so you get the right amount of help when you want it. With new features and extensions released every 3-4 weeks, it's like getting presents all year long.
    • A modern, open source code editor that understands web design.
  • Bluefish Editor
    • Home of the Bluefish Editor, a powerful editor targeted towards programmers and web designers. It supports working with local and remote files, syntax highlighting and a WYSIWYG interface.
    • Bluefish is a powerful editor for experienced web designers and programmers.
    • Bluefish supports many programming and markup languages, but it focuses on editing dynamic and interactive websites.

Versus

  • Free (Non-Commercial) JetBrains Rider vs. Visual Studio 2022 Community Edition -- Visual Studio Magazine - With JetBrains making its Rider and WebStorm IDEs freely available for non-commercial use, Visual Studio 2022 Community Edition has a new competitor, not to mention Visual Studio Code. So what's a (non-enterprise) .NET-centric developer to do now?
  • Vscode vs Webstorm - Which One Is Better? - YouTube
    • Learn the differences between Vscode and Webstorm and which one is better for you. We will go through most important differences and use cases which are important for development.
    • VSCode is a text editor, IDEA and Webstorm are full IDE
  • Visual Studio Code vs Visual Studio - YouTube
    • Deciding on Visual Studio or Visual Studio Code is not just a personal decision but based on the best option for the operating system and application type you are building.
    • There is a community editions or Visual Studio.
    • VSCode is a text editor which can be extended by plugins.
  • NetBeans IDE vs Visual Studio Code | What are the differences?
  • Why I switched from VSCode to Zed. - YouTube - VSCode can be really slow, especially with larger codebases. Luckily, there are some alternatives, and one of them is Zed.
  • VSCode vs NetBeans: A Comprehensive Comparison | vscode.io
    • Visual Studio Code (VSCode) and NetBeans are both popular integrated development environments (IDEs) used by developers worldwide. While they share some similarities, they also have distinct differences that make them suitable for different types of projects and developers. In this article, we’ll compare VSCode and NetBeans across several key areas to help you determine which IDE is best for your needs.
    • VSCode and NetBeans are both powerful IDEs, but they cater to different audiences and use cases.
    • VSCode is a modern, versatile editor that supports a wide range of languages and is highly customizable through its extensive marketplace. It’s ideal for developers who work with multiple languages or who need a lightweight, flexible tool that can be tailored to their workflow.
    • NetBeans, on the other hand, is a full-featured IDE with a strong focus on Java development. Its deep integration with Java and related technologies makes it an excellent choice for enterprise-level projects and developers who need a comprehensive environment tailored to Java. While NetBeans also supports other languages, its primary strength lies in its robust Java tools and features.
  • Apache NetBeans Extension for Visual Studio Code | apache.org - VSNetBeans, the Apache NetBeans Extension for Visual Studio Code, is created as a promotional tool by the Apache NetBeans community for VS Code users.
  • Talk about the main differences between netbeans and vscode? · apache/netbeans · Discussion #6924 · GitHub
    • What are the main differences between netbeans and vscode?
    • All my friends have switched to vscode. It is undeniable that vscode runs extremely fast, has many packages, and has a large community.
    • However, vscode cannot open multiple and multiple software projects like Netbeans. It can only open one project at a time.
    • I will be honest and maybe you will leave NetBeans then but this is not a secret, of course you can add more than one project to the workspace. Just right click on the projects tab and choose add folder to workspace. VS Code will recognice everything inside of it also that it is a git project.
  • Which Code Editor (IDE) should you be using for Python in 2022? - YouTube
    • So it has come to my attention, after reading thousands of comments, that a lot of you are having trouble with Python because of the code editor (or IDE) that you chose for your task. Both PyCharm and Vistual Studio Code are great. If you're a beginner, I highly recommend you start with PyCharm, otherwise Visual Studio Code shouldn't give you any trouble.
    • PyCharm for beginners, otherwise use VSCode
  • Best Code Editor for Python - My personal favorites - YouTube | Christian Lempa
    • Best Code Editor For Python? Here are my personal favourite code editors I've used for Python programming.
    • VSCode is his favourite editor
    • VSCode integrates with Docker Desktop
  • VS Code Wins Best PHP IDE/Editor for WordPress Development in 2021 - Find out the benefits & drawbacks to integrated development environments, code editors and text editors. Plus, we’ll recommend some specific tools for each.
  • NetBeans vs Visual Studio Code detailed comparison as of 2024 - Slant - When comparing NetBeans vs Visual Studio Code, the Slant community recommends Visual Studio Code for most people.
Published in Programming
Read more...
Sunday, 13 October 2024 15:18

Force restricted content and SafeSearch on different platforms

Filtering content is an important thing to do nowadays if you have a family for all the major platforms such as YouTube, Bing, Google, DuckDuckGo and more. In this article I will outline the different methods to restrict content and show you how to apply them.

There are a few different ways to restrict content on the internet:

  • Use a DNS provider that implements the restricted content for you.
    • OpenDNS, CleanBrowsing, etc...
    • Some are paid and some are free.
  • Install control Apps on your device
    • This requires an installation on each device.
  • Override key domains for each of the platforms you want restricted content on.
    • This is done on your router or hosts file on your PC.
  • Each platform can usually have the content filters by the account. This does require you to login to get the filtered results.
  • When using the DNS options it is important to make sure you do full DNS Hijacking on your local network to ensure the DNS requests are all sent through your router.
  • You should always make the changes on your router/network level so you do not have to visit each device and you cannot change the DNS settings on every device as required such as a Firestick.

 YouTube

  • To test the restriction level, visit:
  • Tutorials
    • Control YouTube content available to users - Google Workspace Admin Help
      • As an administrator, you can set up your network or managed devices to restrict which YouTube videos are available to employees and students in your organization.
      • Not everyone's router can override CNAMEs such as pfSense. There is a workaround, see below.
    • How To Enable YouTube Restrict / Moderate Modes | cleanbrowsing.org
      • This articles shows a user what options YouTube offers with restrict and moderate mode for content on the YouTube platform.
      • YouTube Offers 2 modes:
        • restrict.youtube.com: More strict mode. It blocks access to videos with violence, language, sexuality or adult content. It is the closest to the YouTube Kids mode. Blocks comments. Recommended for kids under 12.
        • restrictmoderate.youtube.com: Less strict mode. It blocks access to videos with possible violence, sexuality or adult content. It also blocks comments.
    • Your YouTube content & Restricted Mode - YouTube Help
      • Restricted Mode is an optional setting that has been available since 2010. A small subset of users, such as libraries, schools, and public institutions, who choose to have a more limited viewing experience on YouTube use Restricted Mode.
      • Restricted Mode is turned off for viewers by default.

General Notes

  • Filters from different companies
    • Web Content Filtering and Security – OpenDNS - Introduction to Web Content Filtering and Security
    • Free DNS Filtering | Block Online Porn with CleanBrowsing - Free DNS Filters by CleanBrowsing allow you to filter adult, pornography, obscene and other similar content from your internet.
    • CleanBrowsing - Wikipedia
      • CleanBrowsing is a free public DNS resolver with content filtering, founded by Daniel B. Cid and Tony Perez. It supports DNS TLS over port 853 and DNS over HTTP over port 443 in addition to the standard DNS over port 53. CleanBrowsing filters can be used by parents to protect their children from adult and inappropriate content online.
      • There are several filter levels with their settings outlined here.
  • Tutorials
    • How to: Enforcing Google SafeSearch, YouTube, and Bing – OpenDNS
      • Currently, enforcing Google SafeSearch, YouTube, or Bing on your network without an HTTP proxy requires the ability to create a local Canonical Name (CNAME) record on your local DNS server or editing your Hosts file on your local computer.
      • The Global enforcement of Google SafeSearch previously was only possible with a local agent or firewall rules; however, Google has introduced a new way of enforcing SafeSearch with Google SafeSearch VIP.

Handling CNAMEs on pfSense

Instructions

  • Here we ping the CNAME, get the IP and use that instead of the CNAME.
  • The basic procedure below can be used for all of the platforms that use a SafeSearch VIP system (i.e. like below)

Notes

  • pfSense is configured as a forwarder and not a full authoritative resolver so cannot expand the CNAME records.
  • pfSense Force Safe Search Configuration - Virtualization Howto - pfSense Force Safe Search Configuration. A look at pfSense, pfBlockerNG, Unbound DNS, and other plugins that allow you to enable safesearch
    • Has safe search instructions for Google, Bing, YouTube
    • You can edit the Local Unbound Configuration Files (not recommended)
  • DNS CNAME records posible with unbound? | Netgate Forum
    • No, it's not going to work with Unbound because it's not an authoritative name server and can not expand the CNAMEs. You would need BIND or equivalent for that. Use the host overrides if that solves your problem as noted by dok above.
    • You can override MX, PTR, SRV and even SOA records with Unbound, no problem (not exposed trough the GUI in pfSense but you can use custom options).
    • What I wrote above is bit incorrect. The reason the CNAME records won't work as host overrides is because they have to be resolved with an additional query either to the upstream forwarder or the authoritative server. A resolver like Unbound won't look at its own host overrides to resolve a CNAME, they have to be set in the authoritative server.
  • Guide to force your clients to use Youtube in Restricted mode | Netgate Forum - The below example will show how to configure Unbound to force LAN clients to use Youtube in Restricted mode. This same process will work with safesearch for Google/Bing/etc.
Published in DNS
Read more...
Saturday, 12 October 2024 14:00

My Xbox One Notes

There are some casting notes here: My Meta Quest 3 Notes | QuantumWarp

General

Networking

Port Forwarding

A network port lets your Xbox console communicate with the Xbox network servers and other Xbox consoles over the internet.

To let your Xbox console communicate with the Xbox network, you might need to open or forward ports, which means you'll be making a configuration change to your firewall or network hardware, such as a router. Port forwarding for Xbox is done on your router or other network hardware, not on the Xbox console itself.

Port forwarding is:

  • not needed for all Xbox services
  • only needed to allow for unsolicited traffic

If your router does not have UPnP enabled (or available) which just allows the Xbox to setup the port forward rules automatically, then you will manually need to configure your port forwarding.

Tutorials

The Ports

Port Number Protocol Purpose Notes
88 UDP Xbox Live connectivity  
3074 UDP/TCP Xbox Live party chat and matchmaking  
53 UDP/TCP Domain Name System (DNS) Forwarding this will break local servers
80 TCP Web traffic Forwarding this will break local servers
500 UDP Session Traversal Utilities for NAT (STUN)  
3544 UDP Teredo tunneling  
4500 UDP IPsec NAT Traversal  

Testing

Extensible to test port forwarding you need to do the following things:

  1. Setup the port forwards to point to your PC.
  2. Run an app on the PC that exposes/responds on those ports
  3. From outside of your network, connect to these ports and see if you get an appropriate response.
  4. Once you have checked the port forwards work, re-point them to your Xbox.

Misc Diagnostic /Microsoft Network

Open Ports (Apps)

You can also use simple servers to give the same results. A bit more fiddly but a strong alternative method.

  • HFS (HTTP File Server)
    • Access your files directly from your disk via the web
    • portable, GUI, HTTP on custom ports.
  • MiniWeb HTTP server
    • MiniWeb is a high-efficiency, cross-platform, small-footprint HTTP server implementation in C language. It implements GET and POST methods and works on multiple platforms ranging from server, desktop, game console and IoT hardware.
    • last updated 2018
    • Run on any port 
      miniweb.exe -r ./wwwroot -p 8080
  • netcat 1.11 for Win32/Win64 - ancient netcat for Windows
    • run this command to start a listener on port 12345 
      nc -l -p 12345
  •  Powershell
    • If you prefer no downloads, you can use PowerShell to create a simple TCP listener: 
      # Run in PowerShell as Administrator
$listener = [System.Net.Sockets.TcpListener]8080; $listener.Start(); $client = $listener.AcceptTcpClient()
    • Change 8080 to your desired port.
    • You can then test by connecting to it from outside using telnet or nc.

Check the ports are open on the PC (Apps)

Opened Port Testers (Online)

Opened Port Testers (Apps)

These must be run from outside of your network to be of any use in testing port forwarding.

Opened Port Testers (Command Line)

These must be run from outside of your network to be of any use in testing port forwarding.

  • Telenet 
    telnet your.public.ip 12345

Double NAT Detected

  • Double NAT = An additional (or unexpected) network hop has been detected in the packet path.
  • Strict NAT = UPnP is not enabled.
  • Double NAT Detected
    • The Xbox can be very twitchy about detecting this, so sometimes I wonder if there is actually Double NAT taking place.
    • If all services are available in the Xbox network test, the this warning can be ignored as the Double NAT is not interfering with anything.
    • Double NAT detection is not intrinsically bad, it is just the Xbox has detected an additional (or unexpected) network hop in the packet path.
    • This additional NAT is most likely caused by an additional router or AP between the Xbox and the internet. (i.e. not all your devices are on the same subnet / You have daisy chained two routers)
    • This is not caused by my Powerline adapters as I ruled this out by connecting directly to my router. Cheaper adapters can create an internally NAT network which can cause this error.
    • pfSense Router (with NAT Reflection enabled)
      • If running pfSense this detection "could" be caused by using NAT reflection
      • You would only need to setup UPnP or port forwarding once and the router will take care of everything else.
      • Detection is probably caused by NAT Reflection being present on port 80.
      • I disabled NAT reflection on all of the additional port forwards (NAT) that were recommend by Microsoft to forward and this made no difference to the detection results.
      • This is not caused by my pfSense router having multiple WAN Gateways. I disabled all but the WAN and still got the Double NAT detection.
      • Even with Port forwarding or UPnP enables I was still getting the Double NAT issue.
  • Diagnostics
    • I ran packet capture on my pfSense router for the Xbox's IP and port 3074. When you see traffic here in both directions then the port forwarding is working correctly.
      • I set up the port forwarding in pfSense first, but this might not be needed as the traffic from the Xbox is in response to initial packets from my Xbox on my network rather than being unsolicited.
      • Expect to see traffic between your Xbox and a Microsoft IP address.
  • An Xbox can usually can open ports (port forward) automatically using UPnP but this has to be enabled on your router.
    • Most residential routers have this on by default but commercial ones probably don't because of the security implications.
    • If your Xbox network tests says NAT type = "Strict NAT" then this is a good indication that UPnP is disabled.
  • Detecting Double NAT
    • Use a hop plotter such as Tracert after reading the articles below.
    • Double NAT. How can it be detected? (and why/how it should create issues?) - Super User
      • 'Tracert' (Trace Route) command will show if you have a double NAT. e.g. tracert 8.8.8.8. You will see more than one hop with a private IP address. Note that this assumes small office / home networks where every router applies NAT. Corporate networks may have more hops and you'd need to do more testing to figure out which hops apply NAT.
      • An example of something double NAT detectably breaks is UPnP (Universal Plug and Play) Port Forwarding. When a device on your network requests a temporary port forward rule from your router, it won't work right because the upstream router also needs to forward the port. The device will know something is wrong because the router replied that it granted to port open request, but the port still isn't open from the internet. The device can guess that you are in a double NAT situation.
      • You can also get IP address range overlaps in double NAT situation. It could be impossible for the inner and outer network to communicate with each other because they use the same IP ranges and are thus indistinguishable. Internet may still work on the inner network depending on how smart the inner router is.
      • The major reason double NAT is not desirable is devices in the outer network cannot initiate a connection to devices in the inner network. Actual routing (e.g. static routes) allows bidirectional communication.
    • Detecting and Resolving Double Network Address Translation Issue | Intermedia Cloud Communications - This article explains when Double NAT could be an issue and what you can do to alleviate the issue.

Xbox Website

  • You cannot view your games library on this site, it use to be a feature.

Xbox App (Android/Windows/Website)

General

Check if your Xbox is present in the App

`Xbox App --> Library --> Consoles`
  • This is not the most logical place to look for an attached Xbox, you would assume your Library is just for your games.
  • If you know you have already added your Xbox at a prior time but it is not visible, then this is most likely a network issue such as Double NAT or a lack of `Port Forwarding`/`UPnP`. You should now test your Xbox network connectivity before trying anything else.

Cannot add my Xbox to the App

This can have a few causes:

  • The Xbox network is down. You can check the here.
  • The Xbox is already added and present.
  • Network connectivity issues such as port forwarding are preventing communication.
  • The Xbox is already added but not visible because of network connectivity issues.
  • You cannot add the same Xbox twice to your App, it will always fail as if it cannot talk to it.
  • What would be nice is if an error message came up saying you were trying to add the same Xbox twice.

XBOX 360 Emulator

  • XBOX 360 Emulator - Keep asking for my Xbox password
    • XBOX 360 Games on XBOX One Keeps Asking For Password - Microsoft Community
      • ** Solution from Dan_774 ** ** works **
        • I had this problem on my xbox one x and accidentally solved it. Here's how:
          1. Launch the 360 game. While in the 360 game, open the 360 menu by pressing select and start at the same time. Log in to your account. Select "remember me".
          2. Once logged in, open the 360 menu again and log out WHILE STAYING IN THE GAME.
          3. Open the 360 menu again and log in again. This time it shouldn't ask for your password.
          4. Now you can fully exit the game, relaunch it, and it should automatically sign you in to your 360 account.
        • I did this for multiple accounts on my xbox one and it worked every time so I don't have to keep re-entering my password every time I want to play black ops 2 and any other 360 game. Hopefully it works for you, too.
    • 360 games on series x never reminds my password, everything else works - Microsoft Community
      • Dan_774 solution is on this page.
      • Another suggestion:
        • I figured it out! If you have multiple XBox Ones on your account, only the "HOME" Xbox will remember password and auto sign into xbox 360 games.
          1. You have to sign into your Microsoft Account on a trusted browser, then click on your profile on the top bar and go to settings to see all hardware associated with account.
          2. Click on your New XBox Device.
          3. This is good time to register with Microsoft with a click of a button BTW.
          4. There is no button to make a "HOME" device but there will be a button that states "This is not my Home Device" if it happens to be so.
        • I sold my last xbox one and did not remove my device from account.
        • Once I removed my older devices my new Xbox now remembers my XBox 360 Login and auto-sign ins. What a relief...
    • I keep getting logged out of Xbox Live playing backwards compatible games but only on the 360 not on the Xbox One. | Microsoft Community
      • Your password is longer than 16 characters. 360s including the emulator on the Ones do not like passwords longer than 16 characters if your password is longer than 16 characters then you would need to change it to something smaller.
      • You have two step verification turned on. Again the 360s including the emulator do not like two step verification so you would either need to turn it off or use your app password.
      • You changed your gamer tag since the last time you downloaded your profile to the 360 Emulator/360 console.
    • My password is too long to enter into my xbox 360 | Microsoft Community
      • Basically it is a limitation to the 360 including the emulator on the One for backwards compatible games that it does not like passwords longer then 16 characters so if you are wanting to play games on your 360 just make change your password to something that is less then 16 characters.
      • Enable 2Fa and generate an App password.
  • Passwords always incorrect
    • Password always incorrect when signing into Xbox live for 360 games on Series X console | Reddit
      • I found a fix. I turned off two step verification
      • Yeah somewhere on the xbox / microsoft website there is some button under a "security" tab that says "generate app password" and the password it generates is what you enter for the Xbox 360 download-profile password.
      • This thread also details steps including the password fix from Dan_774 but using an app password.
      • App passwords can only be used if 2FA is on.
      • In summary
        • If you are using 2FA you need to use an App password.
        • You can turn of 2FA.

Purchases and Xbox.com

  • Redeeming Codes
    • To redeem a Xbox One code, use on of the following options:
      1. Goto to https://www.xbox.com/redeemcode
      2. On the Xbox One dashboard: Click on Gamertag --> Three balls --> Redeem Code
    • If you get a code and it is for an Xbox 360 game, then you
      • need to redeem it from the https://www.xbox.com/redeemcode
      • you could maybe do it from a real Xbox 360.
      • I do not know if you can do it from the 360 emulator on the Xbox One
  • View Digital Purchases
    • Console: Settings --> Account Management --> Download History
    • Xbox.com: Gamertag --> My Microsoft Account --> Order History
    • Xbox.com: Gamertag --> Xbox Profile--> My Games ???

Controllers

Different Controller Models

Misc

Glossary

  • Wiper
    • This is the metal disc in a potentiometer that is rotated on the carbon track.
  • Hall Effect Potentiometer / Hall Effect Thumbsticks
    • These are potentiometers that are based on magnets rather than carbon tracks and a wiper. The benefit is that they do not have any moving parts that will wear out.
    • Can Hall Effect Sensors Stop Drift Forever? - iFixit - Hall effect sensors are ideal for joysticks. Find out how Hall effect sensors work, where to find them, and why they’re the perfect antidote to joystick drift!
    • Hall Effect Technology in Gaming Controllers - Learn how Hall Effect technology revolutionizes gaming controllers by providing precise control, reducing stick drift, and enhancing durability. Explore the future of gaming with advanced Hall Effect sensors.
    • Everything you need to know about Hall Effect Sensing Joysticks & Trig – EasySMX
      • In the world of interactive gaming, controllers are the crucial tools through which we enter and navigate virtual realms. Integral to these controllers are the joysticks and triggers, which have seen considerable evolution in their design and the technologies behind them. In this article, we delve into two significant technologies that power these components: Hall Effect sensing and potentiometer-based mechanisms, as seen in ALPS joysticks.
      • Hall effect sensors don't play well with metallic parts iirc, like installing metal thumbsticks in a Xbox One controller could mess with the hall sensor triggers.
    • Third party hall effect sensors replacement for xbox controller? | Microsoft Community
      • Can use more power
      • Xbox series controllers have a 10000Hz polling rate, but current Hall sensors are limited to 1000Hz.
    • Do Hall Sensors make a difference in gameplay? | Reddit
      • Hall sensors alone don't impact gameplay. They're simply a way to read the joystick. A more durable way than potentiometers, but alone they don't alter gameplay.
      • Yes it does affect all non Shooters or 3D games. ALPS is far superior for metroidvanias fighting, racing, platformers in which you need perfect inputs for competitive play. HALL wont register diagonal inputs correctly (or register them at all) and most of the time you going to regret having one.
      • Hall effect sensors do make a difference in gameplay. They have less of a chance to miss-input than potentiometers, and don't degrade. Having more reliable input will 100% make a difference in gameplay.
      • My layman's explanation is that hall effect sensors are better than traditional carbon potentiometers because they're immune to PODE aka they don't wear down and cause misinputs.
      • To keep it brief: carbon film potentiometers (the normal type found in GCCs) wear down over time, and they get less accurate. We call this "PODE" in the community. This has some positive gameplay effects, but if there is too much wear, it can have really really bad gameplay effects too.
      • Hall effects sensors don't wear the same way, so once you set up your controller, it should be good to go for a much longer time.
    • Jun Zeng's Hall Effect Sticks - PS5/Xbox Installation & Calibration - YouTube | VK's Channel
      • These have a special board that will correct the jitter and calibrate the circularity test.
      • @alexklaus2778
        • One question: I also installed Hall Sticks on a XBox controller and noticed afterwards that the LT/RT Buttons also work with hall sensors. After testing it, I could see how the hall sensor in the sticks gets disturbed by the magnets on the trigger. For my normal Xbox controller I bought clicky buttons from extremerate and want to remove the magnet. You seem to only built in the hall sticks. How did you work around that problem? I guess the scuff you have there will work with the same hall technology for the LT/RT buttons.
        • I do not see a proper solution there since installing the board and calibrating it with software means that it will be centered until I press the LT button (which has its hall sensor right under the sicks). That would cause the left stick to drift a little up or down.
    • New V2.0 Hall Effect Modules - Now without Jitter! - YouTube | VK's Channel - Orange Module V2.0 (I bought mine from this seller it is also cheaper here) the price is for 1 unit.
    • GuliKit - This company makes products with Hall Effect Sensors.

Thumbsticks: Potentiometers vs Hall Effect Sensors

Xbox controllers (most of them) come with thumbsticks that use potentiometers that change resistance so the controller knows how far you have moved the stick. This technology is well tested but the potentiometers wear out because the wiper is a piece of metal that is run against a carbon strip and because of the friction over time these will fail. Hall effect Sensors are a new technology that use magnets and as such there is no physical touching between surfaces so they do not wear out. Below I have done a table of the pros and cons of each of the technology whilst having my 1708 Xbox controller in mind, although most of the principles will be the same no matter what controller you use.

  Pros Cons
Potentiometer
(POT)
  • It is what your controller was designed to use.
  • Spares are easy to source
  • No Jitter
  • Fast response
  • Wears out over time. This is called PODE in the community.
  • Stick drift is a common fault
Hall Sensor
  • Do not wear out
  • Modern Technology
  • Once calibrated, you should never suffer stick drift again
  • Can adjust the calibration of the sensor on the actual unit.
  • Can be more accurate
  • Doesn't suffer from dead zones
  • No stick drift
  • Jitter - Some newer versions appear not to suffer from this.
  • Xbox controller: Hall sensors in the sticks gets disturbed by the magnets on the triggers. This might be true for other controllers.
  • Can use more power, higher battery drain
  • Xbox series controllers have a 10000Hz polling rate, but current Hall sensors are limited to 1000Hz.
  • Hall effect sensors don't play well with metallic parts such as metal thumbsticks.
  • Needs a module board to prevent interference, correct jitter and calibrate for the circularity test. These boards usually only come with premium upgrades.

Conclusion

So in conclusion hall effect sensors are a good thing if decent sensors that do no suffer from jitter and that they will not interfere with the rest of your controller (i.e. triggers on the xbox controller) or you could get ones that come with an additional circuit board that prevents interference and jittering.

Using the standard potentiometers are what your controller was designed for and just swapping like for like is not a bad thing. If you keep wearing out the sticks out frequently then you should use hall sensors.

Tutorials

Stick Drift

Testing

What Causes Stick Drift?

Tutorials

Fixes

  • Update controller firmware
    • This probably will not fix anything, but it certainly will not harm.
  • Software Calibration (Window Only)
  • Software Calibration (Xbox Accessories App)
    • You should try software calibration before any other method if it is available to you.
    • See section below.
  • Modified Software Calibration (Xbox Accessories App)
  • Blow out the thumbsticks with air
    • This only works some of the time but is worth a go.
  • Clean the potentiometers (Wiper and Carbon Track) with Isopropanol alcohol.
    • This worked for me and is my recommended method.
    • This should not need a recalibration as you are using the original parts.
  • Replace the affected potentiometer's Wiper
    • Sometime this can work if cleaning does not.
    • This method requires recalibration.
      • NB: You can try several wipers to see if you get one that does not require calibration because it is the correct value, but this could be time consuming and might not work.
  • Replace the affected potentiometer on the thumbstick
  • Replace the thumbstick with a new one
    • This method requires recalibration.
  • Hardware Calibration
    • If software calibration is not available there are several hardware methods avaliable to complete this process.
    • See section below.

Stick Calibration Methods

Over time the resistance values in a potentiometers change over time (unless you are using hall effect ones) and so re-calibration can fix the problem but also when you swap parts in your thumbsticks these might not have the perfect values and again calibration is required.

  • Xbox Accessories App (Windows and Xbox)
  • Hall Effect Sticks / Potentiometer
  • Manually altering the position of the potentiometers by using their pins
  • Drift Fix Adapter / Drift Repair Board
    • This is a tiny circuit board that you solder onto the back of the controller’s circuit board, behind the thumbstick. It has two potentiometers that allow you to compensate for the loss of resistance in the thumb stick’s own potentiometers.
    • These are used to add an easy calibration method but as such can also fix stick drift.
    • You can buy these on AliExpress
    • How to Fix Joystick Drift Permanently! - YouTube
      • FINALLY! PERMANENTLY FIX JOYSTICK DRIFT for PS4, PS5, XBOX One, and Series X Controllers! New mod from Helder Finally Fixes Joystick Drift!
      • One of the most frustrating issues with modern controllers is that they’ll eventually get joystick drift. This issue essentially makes the controller unusable. Up until now, there have only been ways to band-aid the problem but those are just temporary. We FINALLY have a permanent fix for Joystick Drift! Let’s take a closer look!
    • Drift Fix Analog Stick Fix PCB Mod | Acidmods
      • Has pictures
      • These are not drift proof like people want them to be.
      • These only meant for you to be able to re-calibrate the center.
      • If the carbon filter is too far gone on the stick pots then you're still going to have noticeable drift and only a replacement can fix.
      • I have the top ones but not using them because even slight calibration for example on right make analog not able to go fully left. Maybe other versions are better but that top one isn?t worth any money. I read somewhere that 10k ohm trimmers can be use for better results but never tried.
      • The higher the value used the less impact is has current wise on the circuit. Remember there are 4 POTs in there that all use the same power rail. So 4 x 10k in parallel is really a single 2.5k load on there, but you toss in 4 more 10k and now it's a 1.25k load and now it is using twice as much current. Using a higher value, like 1M, it will still change the voltages of it, which is what the MCU is measuring to 'see' where the stick is, but current wise you've changed it from a 2.5k load to a 2.475k load, not a big enough difference to really matter.
      • Placing it in series is far more work as you would have to place it on the correct side, or both sides and use twice as many parts, and it would really stuff up the divider. Unless you used some trimpots with more turns that you'd want to turn so you could dial in that very minute value, whereas tossing them on there in parallel is quick and easy, and unless the stick is really way off it's not noticeable, and if it is way off then trying another stick or POT should be done first before trying to dial it back in with a parallel one.

Notes

  • General
  • Xbox Accessories App
    • Can be found
      • Xbox: The Xbox Accessories app comes pre-installed on Xbox consoles. Press the Xbox button to open the guide, select My games & apps > See all > Apps, and then choose Xbox Accessories.
      • Windows: To open the Xbox Accessories app on Windows, press the Start button , type Xbox Accessories or choose it from the list, and then sign in. If the app isn’t installed on your PC, get it here.
    • Adjusting the controller stick settings in the Xbox Accessories app | Xbox Support - You can adjust sensitivity settings for the left and right sticks on your Xbox controller using the Xbox Accessories app to customize gameplay to your own personal need or style. This functionality is supported for the Xbox Elite Wireless Controller Series 2 and analog joysticks connected to the left or right USB ports of Xbox Adaptive Controllers.
    • How to optimise your Xbox Elite Controller for better gaming | GamesRadar+ - Six tips and tricks to get the most accurate controller experience possible with Microsoft's luxury peripheral
    • The Xbox February Update is Starting to Roll Out  - Xbox Wire - Use touch controls in Xbox remote play, adjust thumbstick sensitivity for Xbox Wireless Controllers, and more with Xbox’s February Update. This also mentions New thumbstick recalibration tool for Xbox Wireless Controllers (Model 1914).

Controller Sensitivity

  • Controller is hypersensitive on Xbox Home Screen / Dashboard
    • This is caused by stick drift on your controller.
    • I would suggest plugging it into a PC and checking the feedback from the controller.
  • Problem with dashboard sensitivity | Reddit
    • OoomaThurman
      • i had this yesterday, i just unplugged the unit for a while and it resolved it. Reset / hard reboot did nothing to fix it. Unplugged for about 5 mins and came back to it. Might have just been a lucky reset though :-/
    • Misanthrope-X
      • You could check to see if your controller has a firmware update in the accessories app.
      • Your second issue sounds like stick drift but the right stick doesn't have any function on the home screen so that shouldn't impact it there.
      • The best you can do for stick drift is take the controller apart and clean the stick area with isopropyl alcohol but that would probably just be a temporary fix.
    • MistbornSynok
      • It’s caused by the stick drift, I had this issue before.
    • GEDROCKL33
      • Having this issue currently as well the right stick moving on its own. Which i have a friend that works with GS he put it on their controller tester for Trade ins and the Right stick was perfectly Zeroed.
      • I have done a unpair repair, Hard shut off with Xbox button and left on D-Pad until the controller shut off havent done a Clear Cache reset yet but will try that first.
      • Edit!!! Did a Reset Cache clear on the system and havent had any issues so far since. Link to what i did is here How to clear the cache on Xbox Series X | Digital Trends As a note i did the power cycle your xbox series X and the clear Blu Ray Cache. I did not do the reset console. Unsure if its a permanent fix but so far this has worked for me.
  • Can I adjust my Xbox Controller's sensitivity? - Quora
    • If we were talking about using an Xbox One Elite controller then the answer would be "yes!"[1] . Standard Xbox One controllers don't seem to have the ability to non-invasively adjust the Trigger range[2] — which is what you're really asking about.
    • All non-invasive customizations to Xbox One controllers require the Xbox Accessories app[3]. In your case, go to the Microsoft Store app on your PC and download Accessories app, then plug in your controller using a USB cable. Last time I checked this didn't work if you tried to do it using the Wireless Adapter. You'll see what you can configure and customize there.
    • Having said this, the whole reason why the Elite exists is because Microsoft wanted to give non-professional players the experience of using a highly customized controller. The implication there is that it is possible to invasively modify the controller to your heart's content. How to do that? As far as I know at minute this is the only way, while each game it's different and you would need different settings.
    • Each game in the settings options have the sensitivity options where you can work it out this.
    • No you can not change the sensitivity in xbox one settings. Maybe in a particular game but have not got any in which you can change. So there is not pretty much customization you can do about it.

D-PAD Button Repair

  • Easiest way to fix the D-pad on an Xbox controller - works on Series S, Series X and One controllers - YouTube
    • This video shows how you can repair a none working D-Pad on an Xbox One, Xbox Series S & Xbox Series X controller.
    • The D-Pad, also called the directional pad uses a conductive film for the buttons.
    • This film is known to go bad, which causes the D-Pad to stop working.
    • NB: Do not put the sticky film on top of a towel where you get loads of filth if you are going to reuse
    • NB: I would use a pen to mark on the board where the outside of the plastic film sits to get a perfect fit upon re-fitting.

Use an Xbox 360 Controller on Xbox One

  • How to Use an Xbox 360 Controller on Xbox One: 5 Steps
    • Do you wish you could use your old Xbox 360 controller on your Xbox One or Xbox One X and S?
    • While you can't directly connect an Xbox 360 controller to your Xbox One, it is possible to use an Xbox 360 controller with the Xbox One using a Windows computer.
    • This wikiHow teaches you how to connect your XBox 360 controller to your Windows 10 PC and stream your Xbox One games to the XBox app on Windows 10.
    • To do this, you will need an Xbox One, a Windows 10 PC, and a wired XBox 360 controller, or a wireless XBox 360 controller with a wireless adapter.
  • How To Use An Xbox 360 Controller On Xbox One | Yoodley - If your Xbox One controller is broken, or if you want to connect two controllers for multiplayer purposes, you have come to the right place. This guide explains how you can connect your wired or wireless Xbox 360 controller to Xbox one and play multiplayer or other split-screen games.
  • How to use a Xbox 360 controller on the Xbox One (5) - YouTube | My Mate VINCE
    • This quick video shows you how to use a wired and wireless Xbox 360 controller on the Xbox One.
    • This does require a 3rd party dongle.

Console Disassembly

Hard Drive upgrades and repairs

General

Formatting and partitioning of the new drive and optionally transferring your data

There are several steps to swapping your harddrive depending on whether you want to move your data across. some of these tutorials assume you have stripped your Xbox apart and can access both hard drvies.

DVD Drive not reading Discs

 

Published in Other Devices
Read more...
Sunday, 29 September 2024 07:48

My Microscope Notes

This is list of my microscope kit and collection of my related notes.

Kit List

Notes

  • The Microscope Connections
    • The eyepiece:
      • C-Mount
    • The Barlow Lens end:
      • This is the screw thread and diameter standard for my microscope.
      • 1-3/4" (42mm) Mounting Thread
      • M48x0.75
  • C-Mount/ CS-Mount
    • C and CS share the same connection threads
      • Inner Diameter: 25.4mm / M28
    • K3PGP - Experimenters Corner - Difference between C and CS mount
      • The physical difference is the CS mount lens is designed to be mounted ~5mm closer to the image sensor than a C mount lens. (C-mount lenses are designed to be mounted 17.526mm in front of the image sensor vs. 12.5mm for CS-mount.)
      • You can always use a C mount lens on a CS mount camera by using a 5mm spacer ring (many cameras now have C/CS selectable adjustment screws or rings).
    • C-Mount | OptoWiki Knowledge Base - Standardized interface for the mounting of lenses, described in ISO 10935 (1996-12) Optics and optical instruments – Microscopes – Interface Type C
    • CS-Mount | OptoWiki Knowledge Base - Standardized interface for the mounting of lenses, described in ISO 10935 (1996-12) Optics and optical instruments – Microscopes – Interface Type CS
  • Barlow Lens
    • Barlow lens - Wikipedia
    • Barlow Lens - Microscope.com
      • A Barlow lens is a diverging lens that alters the focal length of a microscope and, therefore, the field of view.
      • The most common type of Barlow lens is the Reducing Barlow.
      • A Reducing Barlow reduces the magnification power of the microscope, but has the advantage of increasing the field of view and the working distance between the objective and the specimen.
      • Reducing Barlows are typically 0.3x, 0.5x and 0.75x although other powers are available.
      • 0.5x
        • Working Distance: Increases
        • Field of View: Doubles
        • Magnification: Halves
  • Buying Guides

 

misc

 

Published in Other Devices
Read more...
Saturday, 21 September 2024 15:08

Washed out colours on my Dell U2414H monitor

I have written these instruction while trying to diagnose and fix washed out colours on my Dell U2414H monitor attached to my Dell E6540 laptop which uses the Intel HD Graphics 4600 GPU however the solutions and logic will apply to al lot of setups.

Things that can affect Colours on a monitor

  • OS can affect colour?
  • Graphics Card
  • Windows Colour Profile
  • Bad Panel / Panel Quality
  • Driver
  • EDID profile
  • Angle of viewing 
  • Cable quality

Solutions

Some of these options might not realise unless you restart your PC.

  • Calibration (settings can be changed at the monitor and through Windows)
    • Run the Windows calibration tool (in particular, increasing Gamma)
      Use an Online Gamma Calibration Tool
  • Windows
    • check the brightness in the Action Center (bottom right of screen where screen snip is)
      • This will only affect the inbuilt panel
    • Make sure `Night light` is not enabled.
    • Make sure no 3rd party screen brightness utilities are running.
    • Disable accessibility colour filters
    • Make sure the monitor is set to native resolution and the correct refresh rate.
  • Intel / nVidia / AMD Utility
    • Ccreate a custom resolution in 1080p
  • Hardware
    • Use HDMI and put to full colour range
    • Use external USB graphics card
    • Use another graphics card (not so easy in a laptop)
    • Try different HDMI cables
      • The HDMI signal is especially susceptible to cheap cables.
      • I won't buy another monitor without this port | Make Use Of
        • HDMI 2.0 maxes out at 18Gbps, and 4K with HDR will eat most of that bandwidth alive—flickering, washed-out colors, dropped signals. HDMI 2.1 bumps that to 48Gbps, but the packaging on most cables doesn't make the distinction obvious—so you end up swapping cables and squinting at your screen.
    • Laptop display panels have a hardware brightness control, look at this, but should be tied to action centre brightness setting.
    • Check the monitor is being correctly detected.
  • Graphics Card
    • use the `Intel HD Graphics Control Panel` to alter the colour and gamma (or the nVidia/AMD equivalent)
    • nVidia cards only: This can be rectified for both DisplayPort and HDMI by creating a custom resolution with a 59.999Hz refresh rate. This will be treated by any application* as 60Hz but uses the correct Full Range RGB 0-255 colour signal. The process for setting this up is shown in the video below.
  • Dell U2414H monitor
    • Make sure it's device driver is installed and does not display as "Generic PnP Monitor" in device manage
    • Install the ICC profile for the Dell U2414H monitor. You will find this in the driver package.
    • Check the monitor's viewing angle. Depending on how you look at it the picture can look bad.
    • Check the monitors physical settings (colour, gamma, brightness, contrast, etc...). There is no harm in having a play as you can always put them back.
    • If you have several monitors of the same model, there can be differences between the revisions.
    • Your monitor is old and failing. Get a new one.
    • Try all of the ports (miniDP, DP, HDMI) and see if you get a better picture through one over the others.
    • Daisy chaining the DP ports should not cause any issue, but no harm i trying a single monitor on its own.
    • Try Display Port v1.2
    • Try your monitor with a known good laptop or PC to test to rule out the computer.
    • Configure the monitor via `EDID` which I assume will require `DDC/CI` to be enabled. This monitor might not be EDID capable.
    • Enable DisplayPort 1.2
      • This might not be compatible with your devices and can cause the monitor to no longer recognise an input (not permanently though)
      • It might make the picture better.

Dell U2414H monitor settings

These are a reference for my monitors but if you have a Dell U2414H you might as well use them.

  • Custom Colour:
    • R:100,
    • G:98
    • B:990
  • Brightness: 100
  • Contrast: 75
  • DisplayPort: v1.2 (optional)

Research

  • Windows Calibration
  • Intel 4600 HD GPU / Intel  HD Graphics Control Panel Calibration
    • Best settings to fix washed out colors in Intel HD Graphics Control Panel? | Reddit
      • You need to set the quantization range to full range both under Display > General Settings or under Video > Color Enhancement > Input Range, where you have to click Use Driver Settings first.
      • HDMI tend to default to RGB limited mode, which is what non-HDR televisions use, but it's not suitable for computer displays.
    • Fix your laptop's color and brightness with Graphics Command Center | PCWorld - Fix Windows 10 auto-brightness and color problems with this hidden Intel app.
    • Potential fix for Intel graphics washed out colours (non native HDMI displays) | Reddit
      • When I tried to change the resolution of my monitor to something else I realised that my monitor was using the full colour range. It was only in the case of the default 1080p resolution that it would show washed out colours.
      • The solution was to create a custom resolution in 1080p
    • windows 10 - External monitor is washed out with Intel HD Graphics - Super User
      • This is what worked in my case. My monitor was being incorrectly detected as a HDTV with limited range and adding a custom resolution with "CVT-RB" timing fixed it.
      • How To Geek may have the answer! Essentially HDMI sometimes defaults to RGB Limited. You need to go into your graphics card control panel and change it to RGB Full. On Intel cards it's at the bottom of the General tab according to HTG's instructions.
      • The technical difference is that full range RGB uses full 8 bit range from integer value 0 to 255 where 0 is black and 255 is white. Limited range RGB transmits the image with 8 bit integers but all values 0-35 result in black and all values 235-255 result in white. As a result, the image is actually using only integer values 35-235 meaning you get better compability with old displays but lose about 22% of all possible colors due less effective bits available for the signal.
      • If GPU and display are both compatible, you always want full range RGB support.
      • Some technical information here.
    • How to Avoid Washed Out Colors When Using HDMI on Your PC - Black colors may look washed out and gray if you connect your PC to its display via an HDMI cable, and it's not your display's fault.
    • Quantization Range Option Is Not Visible in the Intel® Graphics
      • Describes expected behavior of the Quantization Range option that’s found on the Intel® Graphics Control Panel and the Intel® Graphics Command Center depending on video connection type.
      • With the most recent drivers (xx.xx.100.xxxx and newer), the Quantization Range option will only be visible if the video output on your computer is native HDMI. Using a DisplayPort (DP) video output or adapters such as DP-to-HDMI or USB Type-C to-HDMI will cause the option to disappear.
    • Quantization Range Option in the Intel® Graphics Control Panel or... - Expected behavior of the Quantization Range option that’s found on the Intel® Graphics Control Panel depending on video connection type.
  • 3rd Party Calibration add Tools
    • LCD monitor test images - Welcome to the Lagom LCD monitor test pages. With the test images on these pages, you can easily adjust the settings of your monitor to get the best possible picture quality.
    • Best free Monitor Calibration Tools for Windows 11/10 - Learn how to calibrate your monitor using these free Color or Monitor calibration tools for your Windows 11/10 PC. Good for Photographers or Gaming.
    • 10 Best Monitor Calibration Tools for Windows in 2022 - To calibrate your monitor, you’ll need calibration software, special calibration gadgets, or a combination of both. Let’s review software and hardware to find the ideal calibration tool for your monitor. 
    • Best Free Monitor Calibration Software Windows 10 - TechWiser - You can always buy a hardware colorimeter but, if you have zero dollars to spend, here is some free software that will get the job done. 
    • Gamma calibration - Lagom LCD test
      • This is a gamma calibration test image. The gamma defines how the luminance (the amount of light) on the screen depends on the 8-bit RGB values. As of 2007, computer monitors are supposed to adhere the sRGB standard, which is very similar to a gamma value of 2.2.
  • Screen Brightness Tools (ie night light)
  • Dell U241H Monitor
    • Dell U2414H Review | PC Monitors
      • A review of the Dell U2414H, a 23.8 inch AH-IPS member of the UltraSharp family with exceptionally thin bezels.
      • This can be rectified for both DisplayPort and HDMI by creating a custom resolution with a 59.999Hz refresh rate. This will be treated by any application* as 60Hz but uses the correct Full Range RGB 0-255 colour signal. The process for setting this up is shown in the video below.
    • Dell U2414H Review - TFTCentral - Dell's UltraSharp range always attracts quite a lot of attention and they always seem to do a good job of updating their screens to offer buyers something a bit new and different each time they do.
    • U2414H Banding using sRGB preset. | DELL Technologies
      • Q: My monitor is exhibiting banding with the sRGB preset. It doesn't do this on the Standard preset, but I would like to use the sRGB preset since that's the one that was factory calibrated. Is there anything I can do to correct this?
      • A:
        • Factory default does not over write calibrations. I would reset and check all modes.
        • Install the driver from the File Library. The driver includes the INF, ICM (ICC), CAT files.
    • Calibrating Dell U2410 and U2414H using Colormunki Display | DisplayCAL
      • Hi! I'm new to display calibration and bought and X-Rite Colormunki Display for calibration and profiling of my Dell U2410 and U2414h.
      • I followed an advice from some guys in the Dell forum and used the factory menu for OSD adjustment of the white point (because usually SRGB preset doesn’t offer RGB sliders).
  • Misc
    • If you turn all the brightness up full and a pure white page does not get any brighter then this is the maximum whiteness that the monitor will show white. If the white looks off colour at this point, then it is a limitation of the monitor.
    • sRGB - Wikipedia - sRGB is a standard RGB (red, green, blue) colour space that HP and Microsoft created cooperatively in 1996 to use on monitors, printers, and the World Wide Web.
    • DisplayPort - Wikipedia - DisplayPort (DP) is a proprietary[a] digital display interface developed by a consortium of PC and chip manufacturers and standardized by the Video Electronics Standards Association (VESA).
    • DISPLAYPORT 1.2, DISPLAYPORT 1.4, DISPLAYPORT 2.0 and DISPLAYPORT 2.1 - To help you understand the evolution and the differences between DP standards, today’s article will walk you through the differences between DisplayPort 1.2, DisplayPort 1.4, DisplayPort 2.0, and DisplayPort 2.1.
    • GitHub - dylanraga/win11hdr-srgb-to-gamma2.2-icm - Transform Windows 11's virtual SDR-in-HDR curve from piecewise sRGB to Gamma 2.2
Published in General
Read more...
Sunday, 15 September 2024 13:25

Transferring Music Tracks from Sony MiniDiscs

There are a few ways to recover music from Sony Minidiscs and these will vary between devices:

  • Digital download
    • Digitally without loss.
    • This will be the actual audio file 'as-is' from the disk. (aea)
    • Tracks will be split into individual files.
  • Analogue
    • Output via the 3.5mm jack.
    • This is a universal method.
    • There will be no track data.
  • SPDIF / Optical / Coax
    • Digital with minimal loss
    • There will be no track data.

This article is dedicated towards digitally downloading tracks direct from the Walkman with no sound quality loss.

My Kit

  • Hardware
    • Windows 11 Laptop
    • Sony Portable Minidisc Recorder MZ-N710 (NET MD Walkman)
    • USB cable (USB A to Mini-B)
    • Edge browser (Google Chrome can be used)
  • Software

Dump the Music Tracks from your MiniDiscs

TL:DR

  • If you just want to dump all of your miniDiscs then I would use: Method 3 (Archive Disc)
  • This will download the TOC, track information in a CSV file, and all of the tracks in one operation.

Setup

  • Connect device to the computer
    • Using the USB A to Mini-B cable.
  • Install Zadiag
    • Short instructions
      • Connect your MZ-N710 via the USB cable.
      • Download Zadig
      • Run the Zdiag installer
      • Click install
      • Reboot windows
    • GitHub - asivery/webminidisc
      • The Windows USB stack requires a driver to be installed to communicate with any USB device. The bad news is that there are no official Windows 10 drivers for NetMD devices. The good news is that we don't need it! We can just use a generic driver like WinUSB to access the device.
      • You can find installation instruction here, but the easiest way to install is to use Zadig.
  • In Edge Browser
    • Open https://web.minidisc.wiki/
      • This is "Web MiniDisc Pro" and is a fork of the original but can also download tracks digitally.
    • Click `CONNECT`
    • Select Netman MD
  • Safety
    • Make sure all your discs have write protect enabled to protect you from mistakes.
  • Insert your disc
    • Simply put your first disc into the MZ-N710
    • You will now see all of your tracks

Download the Tracks

You should now be at this screen with your tracks showing.

Method 1 (Single Track - via Main UI)

  • Click on the 3 dots and select Enable Homebrew Mode Ripping in Main UI
  • Select all of the tracks you want

    • Clicking the top track, hold Shift and select the last track, this will select them all.
  • Click "Download"
    • We don't want to convert them here, we want the RAW data.
  • The track(s) will now download as .aea files labelled with their track number, and name (if present).

Method 2 (Single Track - via TOC)

  • Enter Homebrew Mode
    • Click on the 3 dots and select Enter Homebrew Mode
    • Read the warning and click "YES, I KNOW WHAT I AM DOING"
      • Important information
        • You are about to enter the homebrew mode.
        • The features accessible through this mode aren't part of the NetMD specification and have not been developed by Sony.
        • The developers of netmd‑exploits / netmd‑js are not responsible for any damage done to the discs, data and / or players.
        • From this point on, the software assumes you know what you are doing and will not ask for confirmations or try to prevent damage.
  • Homebrew Mode explained
    • You will be now present with a some tables representing Tracks and the TOC
    • See: Homebrew mode [MiniDisc Wiki]
    • The "Track Junction Map" has one track per sector thing
    • Track 0 is not a track, it possibly is the TOC.
    • You can only download one track at a time.
    • Not all tracks are named
    • The unit must be power cycled between each disk (i think) to clear the TOC which also happens when you swap the disc.
    • If you press the Shift key the track names should be displayed but I never got this to work, maybe my tracks did not haven names on them.
    • Some things to keep in mind:
      • After exiting homebrew mode, the player needs to be reset by taking out the batteries. TOC changes won't be applied otherwise. This is important for Type-R devices in particular.
      • Don't enter the homebrew mode if there are any TOC Edits queued up.
      • If any tracks / fragments / cells / timestamps are removed / added you will need to update the "Other TOC Values", otherwise the changes won't be applied or the disc will become corrupted.
      • Digital transferring of tracks via USB only works if the track can be played by the player. If you create an invalid track and trigger a download, it will crash.
      • After creating a track, please reset the player before downloading it. The players keep a second copy of the TOC, which this software cannot alter.
      • If the track download is stuck on 'Seeking...' it means the track is corrupted. If you are sure the track is valid and can be played on the unit, please report it as a bug.
      • This mode is still very unstable. If you find any bugs, please report them by creating an issue on this project's github page or by messaging the developers on the Minidisc.wiki Discord server.
  • Download the track

    • Select the 'Position Sector' tab.
    • Click on a sector in "Track Junction Map"
      • With 'Shift' pressed down, the ToC tiles show their numbers instead of descriptions
    • Select the ToC tile with the number of the track you want to download on the Track Junction Map
    • If your device supports it, there should be a download button below the tables, which you should click.
    • The track will now download as an .aea file labelled with it's track number, and name (if present).

Method 3 (Archive Disc)

This is the best and most efficient way to archive your discs.

  • Enter Homebrew Mode
    • Read notes from Method 2
  • Archive the Disc
    • Click on the 3 dots and select Toolbox --> Archive Disc

      • The TOC will be downloaded as a toc_.bin
      • The track and disk information will be downloaded as a CSV file.
      • All the tracks will now download, one after the other each as an .aea file labelled with it's track number, and name (if present).

Swapping Disc

  • Disc swapping detection (not tested)
    • There is an option to disable disc swapping detection. this could be useful but would require manual relaod of TOC
    • I have not used this
    • This is only avainable in Homebrew mode.
    • Found here: Homebrew Menu --> Toolbox --> Disable disc swap detection
  • Manual Method
    • Stop the disk spinning before ejecting
      • On my MZ-N710 if I hold the CANCEL/CHG button this will stop the disc spinning and allow you to swap the disc without restarting "Web MiniDisc Pro" but this does not always work.
    • You might need to restart "Web MiniDisc Pro".
    • Repeat the download method you choose.

Convert the AEA files to something useful

In this section I will show you how to take the tracks that you dumped from each disc,

  • and put them into 1 file. The container we will use is MKA. This makes it much easier to manger your disks. Of course this extra step is optional.
    OR
  • a useable format

Single-file albums, Generate multi-track files, Parallel or Sequential?

This section goes over some of the basics of how different formats handle your tracks.

  • General
    • To have a single audio file with multiple sequential tracks, you need to use a file format that supports CUE sheets or has an equivalent built-in method for marking track points. This is exactly how commercial music CDs work. The audio is a single, continuous stream, but the CUE sheet acts as a table of contents, telling the player where each track begins and ends.
    • This approach is different from a multi-track container like MP4, where the tracks exist in parallel and the user can switch between them. In your case, the playback is seamless, and the "tracks" are just markers within the file.
  • MKV, MKA, MP4 Containers
    • These can store multiple separate tracks, but these will be played in parallel  accompanying the video stream. This allows for the videos to have audio in different languages, eg English, Italian and German.
    • You can multiplex multiple sound files together as one audio track in a container and use chapter markers to allow "Track selection". This is not exactly the same as choosing a track on a CD but is is close enough
    • These containers do NOT supports embedded CUE sheets.
  • Key Concepts
    • Single Audio File:
      • The main file contains all the audio data for every track, one after the other.
      • It's one long, continuous audio stream.
    • Track Markers:
      • These are pieces of metadata embedded in the file or stored in a separate CUE sheet file.
      • They don't contain any audio data themselves; they simply indicate the start time of each song or "track" within the single audio file.
      • aka Chapters
    • CUE Sheet (.cue):
      • This is a plain text file that contains the metadata for the audio CD, including artist, album, and, most importantly, the start times for each track.
      • The CUE sheet is typically placed in the same folder as the single audio file (often a .WAV or .FLAC file).
      • When you open the CUE sheet file in a media player, it will read the metadata and present the single audio file as a list of separate tracks, allowing you to skip, shuffle, or play a specific song just as you would with individual files.
  • Chapters vs Tracks
    • Chapters are time pointers on a file with limited metadata such as a title. They can be embedded in a file such a MKV/MKA or present in an external CUE file. The term chapter has come from DVDs where extensively they were Videos and not audio only like CDs.
    • Tracks are individual files, with full file header and meta information. Ypu might be able to ad thee in to a single file to behanve like CD.
    • Tracks and Chapters are not the same thing yet depending how you playback your media they can appear to do the same job.
  • FLAC and WavePack
    • These are single files that supports embedded CUE sheets allowing for multiple tracks in one file.

Getting Files Setup

  • Once you have dumped all of your discs, each disc's AEA files should be in their own folder, within a parent folder as shown. This will make managing and transcoding them much easier. 
    C:\dumpedmusic\
C:\dumpedmusic\1\01. No title.aea
C:\dumpedmusic\1\02. No title.aea
C:\dumpedmusic\1\03. No title.aea
C:\dumpedmusic\2\01. No title.aea
C:\dumpedmusic\2\02. No title.aea
C:\dumpedmusic\2\03. No title.aea
C:\dumpedmusic\flacoutput\
.....
  • Extract the FFmpeg binaries (..\bin\ffprobe.exe, ffplay.exe, ffmpeg.exe) to C:\dumpedmusic\

Convert all AEA files to FLAC

  • My AEA files (998 files, 29 folders) 3.46GB --> 10.3GB FLAC files

AEA is not supported in the MKV container so we need to change the format of the files. FLAC is a lossless codec so is a good one to go with even thought there are a few considerations (size and no strict support). If you do not want to use FLAC the next best codec to go for is the OPUS codec which is heavily supported and is better than MP3. There are no issues with OPUS codec but it is a lossey codec.

  • Open PowerShell
  • Navigate to C:\dumpedmusic\
  • Run the PowerShell script below which will create an individual FLAC file from each AEA and put it in the same folder 
    Get-ChildItem -Filter *.aea -Recurse | ForEach-Object {
    ffmpeg -i $_.FullName -vn -hide_banner -c:a flac -sample_fmt s16 -ar 44100 "$($_.DirectoryName)\$($_.BaseName).flac"
}
    • While running some basic information will be shown.
    • All FLAC files will be overwritten if present, but your AEA files will be untouched.
  • Right click on the parent folder C:\dumpedmusic\ and select Agent Ransack
  • Now search for File name: *.aea
  • Select all of the results and delete them
  • You are now left with each of the disc folders only containing .flac files.

Finalise the Format

Single FLAC file (Embeded CUE)

You can combine multiple FLAC files into a single, continuous file using a few methods, with the best choice depending on your preference for a visual interface or a command-line tool. The most common and effective method is to create a single FLAC file with a CUE sheet. This preserves the original tracklist and metadata while keeping the audio as one file.

This is the simplest method for most people. An audio editor with multi-track support allows you to arrange the files visually before exporting.

foobar2000

While primarily a media player, foobar2000 has powerful conversion and file management tools.

  • Download the FLAC Tools
  • Install the FLAC Tools
    • Extract to a folder of your choice.
    • Adding flac.exe to your system PATH is optional.
  • Open foobar2000 and select your files
    • Add all the individual FLAC tracks to your foobar2000 playlist.
    • Select all the files, right-click, and choose `Convert -> ...`
  • In the `Converter Setup`
    • Output format: FLAC level 5 (this is default)
    • Destination: Generate multi-track files, No title
      • Default: [%album artist% - ]%album%
      • All tracks with the same formatted name will be put into the same file.
        • Not 100% what this means, it might be for aother automations, i just selected all my files and hit convert but the files did share sequenced names i.e.: 1.flac, 2.flac etc...
      • If the output format has native support for multiple tracks in one file (e.g. Ogg and MP4 containers), the converter will use this. Otherwise the converter will generate an accompanying cue sheet file (.cue) for each multi-track file.
      • All internal track titles will be labelled, No title because the files you are converting do not have any metadata (i.e. title) we can use, so the output file's name will be used instead.
      • Title Formatting Syntax Reference - Foobar2000 | jmhauchard - All variables are explained here.
    • Processing:
      • nothing to do here
    • Other
      • nothing to do here
    • Click `Convert`
  • Please select destination folder
    • Select where you want to output the file
  • Please locate flac.exe
    • if you do not have flac.exe in your path and have not told foovar2000 where it is then you will get this popup.
    • Locate and select flac.exe.
  • Conversion will now run
    • This will create a single FLAC file with an embedded CUE file that identifies the tracks and stores their metadata.
  • Fix the Filename
    • The file will be named No title.flac so you should rename this to the disc's number eg: 1.flac
Adding Metadata into the FLAC file
  • Use AIMP: Advanced Tag Editor
    • This editor comes with the AIMP player and is super easy to use.
    • It supports all available fields

Multiplex FLAC files into a MKA container

We will now use MKVToolNix to combine the tracks into one MKA file with chapters signifying the tracks.

  • Open MKVToolNix
  • Add Track 1

    • Right click in the Source Files window, click "Add files".
    • Select your Track 1.
    • Click "Open".
  • Add all of the other tracks for the disc.

    1. Right click on the file you have just added (Track 1) in the Source Files window and select 'Append Files'.
    2. Select track 2, hold shift and then click on the last track to select them all. It is important to select them in the order required.
      • They can now be added in one go, instead of one by one (unless you want too !!)
    3. Click "Open"
  • Output Tab

    • Miscellaneous --> Additional options: --engage append_and_split_flac
      • You can also click on the button to the right to add this switch.
      • This allows use to merge FLAC files. See notes for more information.
    • Chapters --> Generating chapters: One chapter for each appended file
      • For each track add, this sets chapter markers for it.
    • Chapters --> Generating chapters: Chapter <NUM:2>
      • This is the default setting and will output chapters names in the format: Chapter 03
  • Set the output location and file name.
  • Now to run click on 'Start multiplexing'
  • This software will now create a single MKV file with chapters using the FLAC files.
Adding Metadata into the MKA file

We have now created our disc files but the tracks have no information, we will fix that in this section.

Once you have opened your file in MKVToolNix you can swap between the Header editor and Chapter editor without have to close and reopen the same file.

  • Headers
    • Open MKVToolNix
    • Select `Header editor`
    • There is extra meta data here that you can set but I am not sure what is needed.
    • Maybe add a name for the file like 80's Rock in the Title field.
    • Be careful in here as you might break stuff.
    • Save
      • Header editor --> Save
  • Chapters
    • Open MKVToolNix
    • Select `Chapter editor`
    • Click on `Open supported chapter file format`
    • Open your MKA disc file.
    • Select a Chapter
      • NB: Chapter and Track name are interchangeable as they do the same thing.
    • Edit the Name field to something useful like:
      • Track 01 - Status Quo - Lonely Night
      • Status Quo - Lonely Night
    • Edit each chapter as required.
    • Save
      • Chapter editor --> Save

Folder with Separate Tracks

Nothing here

Software

Playback

So you have your single file, how do you play them back. For the most part it is simple, but I just want to put some notes here to allow the easy use of track/chapter selection on the various programs I have used and got working.

Most of the player I have come across 

  • do not allow you to get a list of chapters up on screen easily or at all
  • will always treat files with embedded CUE as `files with chapters` and not tracks. PotPlayer had a workaround as an exception but does not fix the issue.

If want to play a single FLAC file like a CD with the track information displayed allowing you to skip, see how much of the track is left etc, the you want to use AIMP.

This table is shows how various media players can handle single-album files and chapters/tracks.

Player Chapter Markers Chapters Skippable Chapter Information
Panel		 Overall Disc
Time Position		 Notes
Audio Video Players
VLC
  • FLAC = √
  • MKV/MKA = √
  • WavePack =
  • FLAC = √
  • MKV/MKA = √
  • WavePack =
  • FLAC = √
  • MKV/MKA = ×
  • WavePack =
  • FLAC = √
  • MKV/MKA = √
  • WavePack =
  • Playback --> Chapters
    • This allows for chapter selection
  • Shows the separation marks for the chapters, and their names when you hover over them.
  • There are currently no plugins to display the chapters in a sidebar.
  • Has limited FLAC chapter support.
PotPlayer
  • FLAC = √
  • MKV/MKA = √
  • WavePack =
  • FLAC = √
  • MKV/MKA = √
  • WavePack =
  • FLAC = ×
  • MKV/MKA = ×
  • WavePack =
  • FLAC = √
  • MKV/MKA = √
  • WavePack =
  • Playback --> Chapter/Bookmark --> Play bookmarks as separate files in playlist
  • Right click on the markers to skip to chapter.
  • Only shows the separation marks for the chapters, but not their names.
Kodi
  • FLAC = ×
  • MKV/MKA = ×
  • WavePack =
  • FLAC = √
  • MKV/MKA = ×
  • WavePack =
  • FLAC = ×
  • MKV/MKA = ×
  • WavePack =
  • FLAC = ×
  • MKV/MKA = ×
  • WavePack =
  • More of a manager than player.
  • Playlist focused.
  • Great as a standalone media device.
SMPlayer
  • FLAC = ×
  • MKV/MKA = ×
  • WavePack = 
  • FLAC = √
  • MKV/MKA = √
  • WavePack =
  • FLAC = ×
  • MKV/MKA = ×
  • WavePack =
  • FLAC = √
  • MKV/MKA = √
  • WavePack =
  • Browse --> Chapters
mpv
  • FLAC = √
  • MKV/MKA = √
  • WavePack = 
  • FLAC = √
  • MKV/MKA = √
  • WavePack =
  • FLAC = ×
  • MKV/MKA = ×
  • WavePack =
  • FLAC = √
  • MKV/MKA = √
  • WavePack =
  • Very simple, easy to use.
  • Menu --> Chapters
  • Right click on the markers to skip to chapter.
  • Only shows the separation marks for the chapters, but not their names.
5KPlayer
  • FLAC =
  • MKV/MKA =
  • WavePack = 
  • FLAC =
  • MKV/MKA =
  • WavePack =
  • FLAC =
  • MKV/MKA =
  • WavePack =
  • FLAC =
  • MKV/MKA =
  • WavePack =
  • Great as a standalone media device.
  • DLNA, IPTV and other stuff is bolted on.
Audio Only Players
AIMP
  • FLAC = √
  • MKV/MKA = n/a
  • WavePack = 
  • FLAC = √
  • MKV/MKA = n/a 
  • WavePack =
  • FLAC = √
  • MKV/MKA = n/a
  • WavePack =
  • FLAC = √
  • MKV/MKA = n/a 
  • WavePack =
Clementine
  • FLAC = ×
  • MKV/MKA = n/a
  • WavePack =
  • FLAC = ×
  • MKV/MKA = n/a
  • WavePack =
  • FLAC = ×
  • MKV/MKA = n/a
  • WavePack =
  • FLAC = √
  • MKV/MKA = n/a
  • WavePack =
  • Check the GitHub repo for the latest version. It is still developed.
  • More of a manager than player.
  • MKV/MKA not supported
MediaMonkey
  • FLAC = ×
  • MKV/MKA = n/a
  • WavePack =
  • FLAC = ×
  • MKV/MKA = n/a
  • WavePack =
  • FLAC = ×
  • MKV/MKA = n/a
  • WavePack =
  • FLAC = √
  • MKV/MKA = n/a
  • WavePack =
  • Free and Paid versions
  • MKV/MKA not supported
MusicBee
  • FLAC = √
  • MKV/MKA = ×
  • WavePack =
  • FLAC = √
  • MKV/MKA = ×
  • WavePack =
  • FLAC = √
  • MKV/MKA = ×
  • WavePack =
  • FLAC = ×
  • MKV/MKA = ×
  • WavePack =
  • More of a manager than player.
  • Only recognises the first track in a MKA
foobar2000
  • FLAC = √
  • MKV/MKA = √
  • WavePack =
  • FLAC = √
  • MKV/MKA = √
  • WavePack =
  • FLAC = √
  • MKV/MKA = √
  • WavePack =
  • FLAC = ×
  • MKV/MKA = ×
  • WavePack =
  • Everything works from playlists.
  • Treats each track in the file as a playlist item.
Audacious
  • FLAC = ×
  • MKV/MKA = ×
  • WavePack =
  • FLAC = ×
  • MKV/MKA = ×
  • WavePack =
  • FLAC = ×
  • MKV/MKA = ×
  • WavePack =
  • FLAC = √
  • MKV/MKA = √
  • WavePack =
  • Playlist focused.
Amarok
  • FLAC = 
  • MKV/MKA = 
  • WavePack =
  • FLAC = 
  • MKV/MKA = 
  • WavePack =
  • FLAC = 
  • MKV/MKA = 
  • WavePack =
  • FLAC = 
  • MKV/MKA = 
  • WavePack =
  • Currently only avaiable on Linux.
  • Old version are avaiable for Windows.

Editing Metadata, Tags and CUE Files

  • MKVToolNix
    • Only for MKA and MKV
    • This is a feature of the main program.
  • Mp3tag
    • the universal Tag Editor (ID3v2, MP4, OGG, FLAC, ...)
    • Mp3tag is a powerful and easy-to-use tool to edit metadata of audio files.
  • Kid3 - Audio Tagger
    • If you want to easily tag multiple MP3, Ogg/Vorbis, FLAC, Monkey’s Audio, MPC, MP4/AAC, MP2, Opus, Speex, TrueAudio, WavPack, WMA/WMV, WAV and AIFF files (e.g. full albums) without typing the same information again and again and have control over both ID3v1 and ID3v2 tags, then Kid3 is the program you are looking for.
  • foobar2000
  • AIMP: Advanced Tag Editor
    • This is a feature of the main program.
    • Edit a single file with all the music tracks and cue file in chapters editor?
      • So it seems it is not possible to just drag the song (from the playlist) in this case (with single files without cue it is) to the Advanced Tag Editor to open it in the Chaptors editor be edited?
      • Yes, it impossible. Because playlist displays cue-items, not the file.
  • MediaInfo
    • This is a feature of the main program.
  • FFmpeg
    • This is a feature of the main program.
  • MetadataTouch
    • Paid, not just for AV media files
  • VLC
    • This is a feature of the main program.
    • Only file level Metadata can be edited, it does nto support chapters.
    • Tools --> Menu --> Media Information
    • The "General" and "Extra Metadata" tabs allow you to edit or add a wide variety of tags to the container.
    • Also can be done by:
      • Right click on any item in a playlist
      • Select Information
      • Edit the data as required
      • Click save
  • Audacious
    • This is a feature of the main program.
  • MusicBrainz Picard
    • A cross-platform music tagger written in Python, powered by the MusicBrainz database.
  • WonderFox HD Video Converter Factory Pro
  • Wondershare UniConverter
  • Lists
  • CUE files
    • CUE File Specs
      • Cue sheets - Official Kodi Wiki
      • 8.7. Cuesheet - RFC 9639: Free Lossless Audio Codec (FLAC)
        • This document defines the Free Lossless Audio Codec (FLAC) format and its streamable subset. FLAC is designed to reduce the amount of computer storage space needed to store digital audio signals. It does this losslessly, i.e., it does so without losing information. FLAC is free in the sense that its specification is open and its reference implementation is open source. Compared to other lossless audio coding formats, FLAC is a format with low complexity and can be encoded and decoded with little computing resources. Decoding of FLAC has been implemented independently for many different platforms, and both encoding and decoding can be implemented without needing floating-point arithmetic.
    • CUETools - CUETools
      • CUETools is a tool for lossless audio/CUE sheet format conversion. The goal is to make sure the album image is preserved accurately.
      • A lossless disc image must be lossless not only in preserving contents of the audio tracks, but also in preserving gaps and CUE sheet contents. Many applications lose vital information upon conversion, and don't support all possible CUE sheet styles. For example, foobar2000 loses disc pre-gap information when converting an album image, and doesn't support gaps appended (noncompliant) CUE sheets.
    • Cuegenerator
      • A small online utility which facilitates creating cue files from track lists

File Splitting / Extracting

Joiners / Single Album Files

These software will join multiple files into a single files, not containers.

Converters

  • MKVToolNix
    • Only for MKA and MKV
    • This is a feature of the main program.
  • VLC
  • FFmpeg
  • WonderFox HD Video Converter Factory Pro
  • Wondershare UniConverter
  • foobar2000
  • fre:ac
    • fre:ac is a free audio converter and CD ripper with support for various popular formats and encoders. It converts freely between MP3, M4A/AAC, FLAC, WMA, Opus, Ogg Vorbis, Speex, Monkey's Audio (APE), WavPack, WAV and other formats.
    • Not been updated in a while.
    • How can I make a FLAC+cue from multiple FLAC files?
      • Load FLAC files and under file list enable "Create cue sheet" and "Encode to a single file" checkboxes.
      • Under "Selected encoder" field choose FLAC.
      • From "Encode" menu select "Start encoding" and choose output file.
  • CD Rippers
    • Exact Audio Copy
      • Exact Audio Copy is a so called audio grabber for audio CDs using standard CD and DVD-ROM drives. The main differences between EAC and most other audio grabbers are :
        • It is free (for non-commercial purposes)
        • It works with a technology, which reads audio CDs almost perfectly. If there are any errors that can’t be corrected, it will tell you on which time position the (possible) distortion occurred, so you could easily control it with e.g. the media player
      • In-depth Guide to Ripping Perfect FLAC files from CD - Exact Audio Copy (EAC) V1.8 (100% Logs) - YouTube | sharky
        • This guide covers how to rip perfect .flac tracks from your CDs as well as a working CUE sheet, a m3u file for the album and a .log file that will score 100%...
      • EAC (Exact Audio Copy) Beginners Guide - Accurate CD Archival - YouTube | Studio 3B Rocks
        • This EAC (Exact Audio Copy) guide is the basic steps you will need to archive your Music CD collection into FLAC files so you can save them forever, and stream them with your favorite program for years to come.
    • CUERipper - CUETools
      • CUERipper is a utility for extracting digital audio from CDs, an open-source alternative to EAC.
      • It has a lot fewer configuration options, so is somewhat easier to use, and is included in CUETools package.

Notes

  • General
  • Web MiniDisc / Web MiniDisc Pro
    • GitHub - asivery/webminidisc:
      • Upload your Music to NetMD and HiMD MiniDisc devices thanks to WebUSB and WASM
      • Differences between Web Minidisc and Web Minidisc Pro
      • Web MiniDisc Pro was forked from the original Web MiniDisc to provide a more advanced workflow for interacting with NetMD devices.
      • https://web.minidisc.wiki/is the new webapp. Web MiniDisc Pro = Brings NetMD Devices to the Web
    • Web MiniDisc Pro - Brings NetMD Devices to the Web
      • Bring back to life your old NetMD MiniDisc player. Upload music to MiniDisc from the Browser.
      • the new version of the webapp.
      • Web MiniDisc Pro - It is a complete replacement for Sony's SonicStage and Simple Burner software. It is considered the flagship NetMD software project.
    • Web MiniDisc - Brings NetMD Devices to the Web
      • Bring back to life your old NetMD MiniDisc player. Upload music to MiniDisc from the Browser.
      • This is the original version of the webapp.
    • The Web MiniDisc Application - Use your old NetMD device in the browser - Get control of your MiniDisc device thanks to WebUSB and WASM
      • Some of the last MiniDisc players, branded as NetMD units, were equipped with a USB port that allowed for recording music onto the device by using the infamously SonicStage software (Windows only, of course). When Sony abandoned the MiniDisc, that software was left unmaintained and, nowadays, it can’t run outside virtual machines or without using dangerously unsigned drivers.
      • I’ve been lucky enough to find my old MZ-N710
    • The Web MiniDisc Application - YouTube | Stefano Brilli - A short demo of how the Web MiniDisc application works.The GitHub project also contains a few instructions to make the app work fine if you're on Windows or Linux.
    • Web Minidisc Update: ToC Cloning and ATRAC download via USB on Type-S Sony NetMD portables | Reddit
      • I'm very happy to announce a new version of Web Minidisc Pro. It's now possible to transfer tracks via USB back to the computer from Sony Type-S portables.
      • To enable this new functionality, you must check the "Factory Mode Ripping In Main UI" switch in the ellipsis menu.
      • After enabling that functionality, the 'Record' button gets replaced by the 'Download' button. If a warning shows up, saying that the current version is not supported, please use the full factory mode to download the RAM and ROM, then contact me.
      • It can definitely rewrite the TOC of an errored disc, but if the disc itself is damaged, the data just won't persist, so it will go back to its old, errored self.
        • Has instructions on fixing a disc's TOC
      • Worked with my MZ-N710 today
      • You can convert them in vlc media player if you need to, under media /convert. Vlc also does batch conversion as well.
      • AEA files are supported by VLC you can convert them/batch convert them directly from vlc media player under Media/convert/save. (to mp3 should you want to).
      • It won't be possible with the MDS-S500. The button to enter the factory mode won't even be displayed. This works only on portables because of how they're built (the CPU and the USB controller are one chip, this is not the case in bookshelf systems / decks).
      • Sony made a tool to convert from ATRAC to MP3: https://www.sony.com/electronics/support/downloads/W0002971
    • Managing tracks [MiniDisc Wiki]
      • Web MiniDisc Pro has two ways to copy tracks on a MD back to the PC: recording and downloading. The Sony MZ-RH1 also allows downloads similar to the exploits method below.
      • If many options are disabled, the disc may be write-protected. Check the write-protect tab on the disc (open = writable; closed = protected).
    • Ignore vs Skip?
      • Bad Sector - Web Minidisc Pro | Reddit
        • asivery
          • Skip this sector discards this sector's data, and jumps to the next one.
          • Ignore writes the corrupted data to the output file you'll download.
        • NeoG_
          • Skip = Delete corrupted data , audio will jump slightly as part has been removed. Track length is slightly shortened.
          • Ignore = Keep corrupted data, audio will act unpredictably while going over the corrupted data such as making glitchy sounds, Track length is preserved.
    • Web Minidisc Pro - Atracdenc vs Remote Atrac encoder, which gives best quality ? | Reddit
      • This is for transferring music to the device
      • I also read this on the web minidisc pro guide page :
        • "SP mode does not need any encoder as the ATRAC processing is performed by the recorder. This also means SP mode records much slower than LP modes."
        • So I guess choosing the Remote Atrac Encoder, doesn't change anything quality wise, when you choose SP mode ?
      • The remote encoder uses Sony's propriety ATRAC3 encoder from the PSP SDK and has a much higher output quality when compared to atracdenc.
        • And indeed, the remote encoder does not impact SP (ATRAC1) audio.
  • Other Sites
  • Buying Guide
    • MiniDisc Buyer's Guide [MiniDisc Wiki] - MiniDisc Buyer's Guide This page is intended to be a compliment to the Getting Started guide, with more details about particular generations of machine, decks, and “gotchas” - for someone new to the MD format, please check the Getting Started guide first. What do you need?
    • All NetMD devices [MiniDisc Wiki] - All NetMD devices Page / USB Capable players
    • Sony MZ-RH1 / MZ-M200 [MiniDisc Wiki]
      • Sony MZ-RH1 / MZ-M200 The last portable MiniDisc recorder produced by Sony.
      • When originally released, it was the only device capable of transferring recordings made on standard MiniDiscs back to a computer. However, this functionality is now available to all USB-equipped HiMD portables as well as a number of NetMD portables thanks to the WebMiniDisc project. A list of the NetMD portables which support this feature can be found Here
    • Devices that support Homebrew features [MiniDisc Wiki]
      • This page lists Type-S and Type-R portables from Sony (as well as direct clones) that support the netmd-exploits as described on the Web Minidisc Pro guide.
      • The exploits for Type-S devices are older and more thoroughly tested. The exploits for Type-R devices currently operate slower and there may still be errors to work out, and not all functions are available.
      • As of this writing, ripping performance is roughly: - Type-R devices will rip at roughly half of real-time, for SP audio. - Type-S devices will rip at roughly 4x real-time, for SP audio.
  • Hardware
    • Write Protect
      • MINIDISC WRITE-PROTECT SWITCH - YouTube
      • Check the write-protect tab on the disc (open = writable; closed = protected)
        • Open mean the tab is there, closed the tab is pushed in so there is a gap/hole.
      • An easy to read diagram
  • Sony MZ-N710
    • Buy a `Sony MZ-N710`
      • MZ-NF810 same as MZ-710 but with radio tuner.
      • The Italian programmer who originally wrote this software used his MZ-710.
    • Sony MZ-N710 [MiniDisc Wiki] - Sony MZ-N710 Compact and durable NetMD recorder, with its only significant downside being a reliance on gumsticks for internal power, not AA batteries. Works perfectly in both Web MiniDisc and SonicStage. Identical to the MZ-NF810, with the exception of lacking a TV tuner.
    • Sony RM-MC33EL [MiniDisc Wiki] - The remote.
  • Copying MiniDiscs to PC

ATTRAC / AEA Format Information

  • General
    • AEA files are supported by VLC you can convert them/batch convert them directly from vlc media player under Media/convert/save. (to mp3 should you want to).
    • The music/tracks on the minidisc are stored in ATRAC1 digital format and when dumped, the file type is AEA.
  • File information
    • AEA File - What is a .aea file and how do I open it? - Learn about .AEA files and view a list of programs that open them.
      • An AEA file contains audio data encoded in the ATRAC1 format, which is a data compression format developed by Sony. It stores audio most likely dumped from a MiniDisc (MD), which is an optical disc similar to a compact disc (CD) that can be played with various MD players.
      • AEA files are not common, since MDs were introduced back in 1992 and overshadowed by CDs. You will most likely never encounter an AEA file unless you dump audio from an MD you own. You may also receive an AEA file from a friend sharing music dumped from one of his MDs.
      • The ATRAC1 format is a variation of the ATRAC format, which stands for Adaptive TRansform Acoustic Coding. Besides being used in MDs, the format was also utilized in the Sony Dynamic Digital Sound (SDDS) theater sound system in the 1990s.
  • CODEC Information
    • ATRAC: Adaptive Transform Acoustic Coding for MiniDisc | minidisc.org
      • Compression of 16-bit 44.1 kHz stereo audio into less than 1/5 of the original data rate with minimal reduction in sound quality.
      • 16-bit 44.1 kHz = (16/44.1)
    • .AEA File Codec Info Question... | Reddit
      • DCT based audio formats don't really have a bit depth, so VLC decodes them all to 32-bit PCM internally. Newer versions of VLC identify this as "decoded bit depth" and report the original bit depth if available, but I suspect for atrac files it is not available, and only the sample rate is.
      • I'm still looking for the most viable way of converting ".aea" files extracted with WebMiniDisc Pro, and although ffmpg is a good option I have the doubt about wich are the best settings for the conversion to WAV or FLAC, since in the VLC info about the ".aea" file, it says that the bit depth is 32 bits wich I find too high but altough the source is only 16 bit I don't want to convert to 16 bit as I would be cutting information from the original minidisc file... so is trully 32 bit the depth of the minidisc files (SP)?
      • VLC worked fine for converting multiple at once but otherwise I used Audacity. For some reason VLC wouldn't play some of the tracks but Audacity does. You can use a software called SPEK to see if information is lost during conversion.
      • The AEA files should be 16/44.1.
      • The decoding is happening with the open source ATRAC1 decoder in ffmpeg/VLC and is itself passable but still not quite as good as if you'd played the audio on a minidisc machine and recorded it onto your computer.
      • I haven't tested converting the AEAs to anything yet but I'd say if the result is any greater than 320 kilobits per second, something is lying along the way. The SP format is only 292kbit/sec and ATRAC isn't that miraculous.
      • An alternative ATRAC decoder (and encoder...) exists in the form of "atracdenc" here: https://github.com/dcherednik/atracdenc
      • I'd just go with converting to a very common lossy format once now (320 kbps MP3 if you want to overdo it, but 128/192 is probably "just fine", and if it's spoken word only - not music - even less than that should be plenty - YMMV) for everyday use and easy accessibility, and keep the AEA files for long-time archival (you can always turn the AEA files into WAV/FLAC using ffmpeg).
      • ffmpeg's source code won't go away that fast, so there will always be the possibility of converting later (assuming the AEA files are smaller than a corresponding FLAC file, so you can save storage space by hanging onto the AEA files + ffmpeg instead of just FLAC). Also, VLC will most likely "forever" be able to play back AEA files on the fly.
    • Analyse the .aea file with FFmpeg (Use ffprobe) to see the properties: 
      ffprobe input.aea

[aea @ 000001bb2aec5e40] Estimating duration from bitrate, this may be inaccurate
Input #0, aea, from 'input.aea':
  Duration: 00:05:02.25, bitrate: 292 kb/s
  Stream #0:0: Audio: atrac1, 44100 Hz, stereo, fltp, 292 kb/s

or

ffmpeg -i input.aea

[aea @ 00000225f2775cc0] Estimating duration from bitrate, this may be inaccurate
Input #0, aea, from 'input.aea':
  Duration: 00:05:02.25, bitrate: 292 kb/s
  Stream #0:0: Audio: atrac1, 44100 Hz, stereo, fltp, 292 kb/s
At least one output file must be specified
      • ffmpeg -i appears to do the same thing as ffprobe, however it expects an output file and will give the information but also an error.
    • Analyse the .flac file with FFmpeg (Use ffprobe) to see the properties: 
      ffprobe input.flac

Input #0, flac, from 'input.flac':
  Metadata:
    encoder         : Lavf62.4.101
  Duration: 00:05:02.08, start: 0.000000, bitrate: 1001 kb/s
  Stream #0:0: Audio: flac, 44100 Hz, stereo, s16

Converting ATTRAC/.AEA

  • Guides
    • Converting ATRAC files to other formats [MiniDisc Wiki]
      • Converting ATRAC files to other formats with FFMPEG.
      • This will keep all the audio information in the WAV file as is. To create FLAC files with better tag and error correction support, use this command instead: 
        for f in *.aea; do ffmpeg -i "$f" -vn -hide_banner -c:a flac -sample_fmt s16 -ar 44100 "${f%.aea}.flac"; done
        • My PowerShell script for Windows was based off this.
      • There are Windows and Linux scripts here.
    • Convert ATRAC3 Plus to ATRAC1 · Issue #9 · dcherednik/atracdenc · GitHub
      • Q: Is not possible yet. It's only possible to decode Atrac1, not Atrac 3 or Atrac 3 Plus.
      • A: You can decode ATRAC3PLUS by FFMPEG to PCM and than encode PCM to ATRAC1. The result will be same.
      • The New Year present ))
        • I added support of reading from stdin for windows and POSIX. So now it should be possible make a pipe from ffmpeg to atracdenc. Example: 
          ffmpeg -i input_audio_file_supported_by_ffmpeg -f au - | atracdenc -e atrac1 -i - -o out.aea
        • https://github.com/dcherednik/atracdenc/releases/tag/0.0.2
          • For Windows Win32 Api based reader is used. Limitation: only AU(SND) 16bit 44100Hz stereo/mono input stream supported.
    • Is there a fool's guide to the new NetMD backup exploits? | Reddit
      • With that in mind, here's an easy way to convert AEA files to something else: 
      • If these are LP2 or LP4 recordings, you can achieve Sony-quality conversions on your computer by renaming the AEA files to OMA and using ATRACtool. 
      • Important to note: the aea files are ATRAC and not lossless to begin with. They are however the original data on the disc and thus the highest quality rip possible.
      • It's also important to note that the files are ATRAC, and there are differing qualities of ATRAC decoders. In particular, Sony made significant improvements to the ATRAC decoding on Type-S machines. 
      • So, whilst if you archive the raw ATRAC data, you are getting a bit-for-bit copy of what's on the disc, however in order to play the files, they need to be converted to raw PCM at some stage of the process. Playing back these files using software decoding may result in reduced sound quality versus playing them back through a Type-S player and recording the bitstream with a lossless codec. 
      • I'd hazard a guess and say that a Type-S MiniDisc player has a more advanced ATRAC decoder than VLC. Many (all?) currently available software decoders are based on reverse engineering the ATRAC spec. Sony never publicly released detailed technical information on how ATRAC works, nor what improvements they made to the encoder and decoder over the years, particularly the improvements made to the decoder in Type-S machines. 
      • Type-R, that came out before Type-S, had a more efficient encoder - it used more processing power to optimise the allocation of bits to more "important" sounds. Discs recorded on a Type-R machine will sound better, even on older equipment, than discs recorded on older machines. Then Type-S came out, this rolled in the encoding improvements of Type-R and added decoding improvements. This could take older ATRAC data and somehow do a better job of decoding it, as well as use the Type-R improvements when recording. 
    • VLC Converting Guide - Is there a fool's guide to the new NetMD backup exploits? | Reddit
      • There's been some discussion about the merits of ATRAC ripping versus recording the optical audio output of a deck. My apologies for contributing to the noise on that. Whenever this ocmes up I consider it important to mention there's different options with different trade-offs in terms of quality.
      • Although on technicality this isn't fully correct, everyone who says ATRAC ripping is the best possible method is right that it's the fastest, most convenient, and cheapest method and typically good enough. But not always -- we've had a couple people come by who had recordings where getting every last bit of quality that existed in the recordings was important and for them, ripped ATRAC files wasn't the answer.
      • Guide using VLC is given.
    • Trying ATRAC1 in software way? | Reddit - Some technical information about using FFmpeg, foobar2000, atracdenc, traconv.
    • Convert AEA to MP3 - Easily Convert AEA ATRAC1 Audio Files - YouTube
      • Have some old AEA audio files lying around and want to convert them to the more common MP3 format? This video shows you how to convert AEA ATRAC1 audio files to MP3 effortlessly.
      • WonderFox / VideoConvertoryFactory Advert.
    • How to Convert AEA (ATRAC1 Audio) to MP3?
      • Have some old AEA audio files lying around and want to convert them to the more common MP3 format? This post shows you how to convert AEA ATRAC1 audio files to MP3 effortlessly.
      • WonderFox / VideoConvertoryFactory Advert.
  • Tools (ATRAC)
  • Tools (Other)
    • BatchEncoder (Audio Conversion GUI)
      • An audio files conversion software.
      • It supports most of popular audio file formats including lossy and lossless compression.
      • The program is very simple to use. BatchEncoder is basically GUI front-end for command-line tools.
      • All it does is create background processes and pass arguments to it with options set in presets/format menu and additionally adds input and output file paths.
      • For specific options for each format use help available for command-line tools.
    • Audacity ®
      • Audacity is the world's most popular audio editing and recording app. Edit, mix, and enhance your audio tracks with the power of Audacity.
      • This uses FFmpeg under the hood.
      • Merging multiple audio files into one single file using Audacity : CRST Support - This guide will walk you through the process of merging multiple audio files into one using Audacity, a free and open-source audio editing software. This method is useful for combining recordings, music tracks, or other audio clips into a single file.
    • MKVToolNix
      • Description
        • MKVToolNix is a set of tools to create, alter and inspect Matroska & WebM files under Windows, macOS, Linux and other Unices. It is the de-facto reference implementation of a Matroska multiplexer.
        • MKVToolNix consists of the following command-line tools and GUI:
          • mkvmerge
            • is a tool to create Matroska & WebM files from other formats.
            • used for merging or multiple files into one MKV file, or to rewrap a single file into an MKV file. In this process you can also select which tracks from which files you want.
          • mkvinfo
            • allows one to get information about the tracks in Matroska & WebM files.
            • It just reads out all the metadata and contents of an MKV file.
          • mkvextract
            • can extract tracks from Matroska & WebM files to other formats.
            • used to extract individual tracks from an MKV file into separate different non-MKV files.
          • mkvpropedit
            • can edit properties such as header and chapter information or attachments without remuxing.
            • Just modifies the properties and metadata of an MKV file without remuxing or rewrapping the whole thing.
          • MKVToolNix GUI
            • sits on top of the commands
            • an easy-to-use program making the functionality of those command-line tools available as a GUI.
        • What it does: Designed for Matroska containers (MKV/MKA), it lets you easily mux (combine) multiple audio files into a single MKA container without re-encoding.
      • Official Sites
      • Making a .MKA with many tracks (like a CD) - Need some help and clarification - Help - MKVToolNix community & help forum
        • ATRAC is not supported. FLAC is supported, but appending FLAC files is currently disabled by default. You can enable it manually. Please see this FAQ entry for details & instructions.
        • A lot of people append FLAC with mkvmerge with the options given in the FAQ entry. For most of them playback works fine. However, this depends on the player.
        • The sentence you quoted should probably read something like this:
          • "So basically in order to support appending and splitting FLAC tracks properly and be widely compatible with other devices I would have to implement my own FLAC decoder, something I’m not willing to do."
        • FLAC is the only audio format for which this is a problem in mkvmerge.
        • And again, please read about adding vs appending, as “only the first track plays” is the usual symptom for when you add all files instead of appending the second & all following files, causing content of all files to be laid out in parallel instead of in sequence.
        • mbunkus
        • Personally I use Opus for everything. For my personal audio I usually encode at 140 or so, but please look elsewhere for evidence-backed info on which bitrates to use for it. It’s been a while since I looked into it.
        • Generally it depends on the devices you want to play your stuff on. Most software players support Opus, and I don’t think there’s really one that supports Matroska but not Opus. Hardware players are obviously a different topic.
        • If I don't use FLAC, and I cannot use AEA, what si the next best codec to use = OPUS
      • Adding files vs. Appending files vs. adding as additional parts - mbunkus/mkvtoolnix - Codeberg.org
        • mkvmerge can lay out content either in parallel or sequentially:
          • Parallel: when you have three files that are laid out in parallel, the content of all three files will be played simultaneously.
          • Sequentially: when you have three files that are laid out sequentially, all of the content of file 1 is played first followed by all of the content of file 2 and finally followed by all the content of file 3.
        • "Appending files" vs "adding as additional parts"
          • If you ever run across media files which have been split somewhere in the middle with a program like WinSplit (meaning they've been split at an arbitrary position), then the second part won't have a full set of headers.
          • In such cases mkvmerge can treat those two parts as if they were only one file.
          • This is what the »add as additional parts« option does.
        • My thoughts:
          • Append files = Normal track use.
          • Adding as additional parts = For single files that have been split without each getting their own header or certain media like DVD VOB files.
      • Appending & splitting FLAC audio tracks not supported - mbunkus/mkvtoolnix - Codeberg.org
        • FLAC audio tracks cannot be appended or split with mkvmerge. Versions up to and including v44 did not actually emit error messages; however, the result was that the resulting FLAC tracks were invalid and could often not be played.
        • Starting with version 45 mkvmerge will refuse to append or split FLAC audio tracks and emit an error message instead.
        • Starting with version 47, the old behavior can be restored by adding --engage append_and_split_flac to mkvmerge's command-line options (in the GUI: multiplexer → "Output" tab → "Miscellaneous" → "Additional options"). Please note that this will result in broken tracks: the official FLAC tools will not be able to decode them and seeking will not work as expected.
      • Muxing | The Wiki - Muxing files with MKVToolNix
    • GUI for mkvextract
      • GitHub - Gpower2/gMKVExtractGUI
        • A GUI in C# for mkvextract (MKVToolNix).
        • gMKVExtractGUI is a powerful and intuitive Graphical User Interface (GUI) built in C# .NET 4.0 for the essential mkvextract utility, which is part of the MKVToolNix suite. It aims to provide a user-friendly wrapper that incorporates most (if not all) of the functionality of both mkvextract and mkvinfo.
      • Sheck's Software » MKVCleaver
        • A front end (GUI) for MKVExtract.exe
        • Extract data from multiple MKV files with minimum effort form the user.
        • Enables the user to manipulate the extraction process on per file basis or as a whole.
        • Provides information about each file to allow the user to make the best decision about the extraction setup.
        • Provides a visual interface to MKVExtract.exe and allows to drag & drop files, manipulate extracted filenames based on a user’s criteria, session recovery after a crash or an error, changing of extraction options without messing around with the command line, extraction error tracking…
    • Batch Multiplexing (mkmerge)

 

Other Codec/ Container and Tools

Audio Containers

TL;DR

  • Local Files: MKV
  • Web: WebM
  • MKV (Matroska)
    • MKA File - What is an .mka file and how do I open it? - Learn about .MKA files and view a list of programs that open them.
    • In-Depth Understanding of MKA: What is MKA and How to Convert MKA - If you want to know how to handle MKA files better, click here. We offer a collection of MKA-related knowledge to guide you in dealing easily.
    • Can I safely rename mkv to mka? - Help - MKVToolNix community & help forum - Is safe to rename a .mkv file that only contains audio and nothing else to .mka?
      • From Matroska’s point of view the file name extensions don’t matter at all. Content-wise they’re the same type of file, carrying the same type of structure inside.
      • The only difference you might encounter is if a piece of software uses different code paths depending on the file name & extension instead of looking at its content. I don’t know of any program that treats .mkv & .mka differently, but I thought I’d mention it.
    • MKV Format: How It Works and How It Compares to MP4 - Learn about the Matroska Multimedia Container (MKV) format, its history, design, and technical structure, and how it compares to the popular MP4 format.
    • While best known as a video container, the MKV format is an incredibly versatile and powerful container for audio as well. It is a completely open-source format that can hold virtually any number of audio, video, and subtitle tracks. This makes it a great choice for projects that need multiple, distinct audio streams within a single file. For example, you could have a high-quality main track, a lower-quality commentary track, and a different language track, all in one MKV file.
    • Matroska is an audio/video container, often found with the .mkv extension. It is also the basis of the WebM container.
  • MKA
    • MKV and MKA are exactly the same file, they just have different files extension to show their use, but this is not mandatory.
    • The MKA extension is used to show the user it is audio only.
  • WebM
    • WebM - Wikipedia - The WebM container is based on a profile of Matroska. WebM initially supported VP8 video and Vorbis audio streams. In 2013, it was updated to accommodate VP9 video and Opus audio. It also supports the AV1 codec.
  • M4A (MPEG-4 Audio)
    • M4A File - What is an .m4a file and how do I open it? - Learn about .M4A files and view a list of programs that open them.
    • This is a popular container format, often associated with Apple's ecosystem (iTunes, Apple Music). M4A files can contain different audio codecs, like AAC or Apple Lossless Audio Codec (ALAC). They also support metadata, chapter markers, and in some cases, multiple audio streams. Audiobooks, for instance, are often packaged in the M4B format (a variation of M4A) which allows for bookmarking and chapter skipping.
    • M4A can be used to hold mulitple tracks but is difficult to use.
  • MKV vs WebM
    • MKV vs. WebM - What's the Difference? | This vs. That - What's the difference between MKV and WebM? MKV and WebM are both popular video container formats that are widely used for storing and playing multimedia content.
    • mkv vs webm - Bing Search - Here’s a comparison of MKV vs WebM:
      • MKV (Matroska):
        • Supports a wide range of audio and video codecs, making it versatile for high-quality video storage.
        • Ideal for storing movies and TV shows due to its ability to hold multiple audio tracks and subtitles.
        • Generally larger file sizes compared to WebM, which may not be suitable for web streaming.
      • WebM:
        • Specifically designed for web use, optimized for streaming and lower file sizes.
        • Supports VP8/VP9 video codecs and Vorbis/Opus audio codecs, making it efficient for online video.
        • Less versatile than MKV, as it is primarily used for web applications and may not support as many features.
      • In summary, MKV is better for high-quality video storage, while WebM is optimized for web streaming and lower file sizes.
    • MKV vs WEBM: Which One Should You Choose?
      • What distinguishes MKV from WEBM? You may find a thorough comparison between the video formats MKV vs. WEBM here, along with MKV to WEBM conversion tools.
      • It is possible to think of the WebM container format as a simplified version of the MKV format. The lack of support for other codecs is WebM's primary issue. It is only compatible with free codecs, such as VP8 and VP9, among others.
      • In MKV vs WEBM, WEBM files can also be stored in MKV format. However, not every MKV file can be converted to WEBM format. 
      • WebM, a constrained variant of MKV, is supported by several web browsers. The permitted video codecs are the main limitation. Only the open and free VP8 and VP9 codecs are used for the WebM video. Between MKV vs WEBM, all MKV files were WebM files, although not every MKV file is WebM-compliant.
  • OGG
    • Ogg - Wikipedia
      • Ogg is a digital multimedia container format designed to provide for efficient streaming and manipulation of digital multimedia. It is maintained by the Xiph.Org Foundation and is free and open, unrestricted by software patents.[

Audio Codecs

TL;DR

  • Lossless Audio: FLAC
  • Lossey Audio: Opus (maybe @140bps)
  • Video:
    • H.264 (defacto standard)
    • H.265 (better than H.264 but not everything can read this)
    • AV1 (this is open source and is becoming the new standard but it is still relative new)
  • General
    • MP3, AAC, WAV, FLAC: all the audio file formats explained | What Hi-Fi?
      • Do you know your OGG from your ALAC?
      • Digital music comes in many different formats – almost everyone knows MP3 thanks to Napster at the end of the last century, but what about OGG, AIFF, MQA or DSD? Confused? Don't worry, we're here to help you chart a course through this alphabet soup.
      • Here we'll break down what these file formats are, what makes them different from their alternatives and why that matters. We'll also spell out which qualify as hi-res audio.
      • MP3s encoded at 128kbps will incur more sound loss than those encoded at 320kbps (kilobits per second, where each “bit” is essentially a “piece” of the song). Now that storage is so much cheaper, we'd avoid 128kbps at all costs, though 320kbps MP3s still have their purpose if your storage is limited – and they remain a standard on download stores.
    • Which audio format is the best? - Live Sound Blog
      • Find out which audio format is the best for quality, storage, and compatibility. Compare MP3, AAC, FLAC, WAV, and more to make the right choice!
      • Casual Listening: MP3 (320kbps) or AAC
    • Best Audio File Formats: Which One Should You Use? | Headphonesty - A comprehensive guide to understanding the different audio file formats and who they are for.
    • Comparison of video container formats - Wikipedia - These tables compare features of multimedia container formats, most often used for storing or streaming digital video or digital audio content.
    • Audio File Formats at a Glance: How to Choose the Right One - WAV? MP3? AIFF? Find out what the most common audio file formats are, how they differ and which format serves best for your purposes.
  • MP3
    • This is the original gold standard and is still heavily used to day, even with it's limitations.
    • It does not support multiple tracks.
    • It has a max bitrate of 320kps
  • FLAC
    • General
      • FLAC is a lossless format, meaning it compresses the audio without any loss of quality. Because it's a very popular and open-source format, many audio players and rippers (like Exact Audio Copy or CUETools) have built-in support for embedding and reading cue sheets from FLAC files. This allows for gapless playback of albums that have continuous music, while still providing the ability to skip to specific tracks.
      • Supports embedded CUE sheets.
      • FLAC - FAQ
        • A free, open source codec for lossless audio compression and decompression.
        • FLAC stands for Free Lossless Audio Codec, an audio format similar to MP3, but lossless, meaning that audio is compressed in FLAC without any loss in quality. 
      • audio - Converting m4a (alac) to flac using ffmpeg, output is lower quality? - Super User
        • Don't pay heed to the bitrate shown for the output during conversion - that is germane only when the encoder's rate control method targets a bitrate. The FLAC encoder doesn't. Run ffprobe on the output file after it has been generated. It will show the actual encoded bitrate.
        • FLAC is a lossless codec, so irrespective of the bitrate obtained, it will be lossless i.e. of identical quality, relative to the source.
        • s16 and s16p refer to the sample formats generated by ffmpeg's decoder for these formats. s16p means the decoded samples are signed 16-bit integers, with each channel in a separate plane i.e. C1 C1 C1 C1 and C2 C2 C2 C2 whereas in s16, they are stored interleaved as C1 C2 C1 C2 C1 C2 C1 C2. To clarify, this is the layout and format of the uncompressed output produced by the decoder. The actual data in the files is coded (hence the term encoded).
        • There is a PowerShell script with explanations simiiar to mine.
      • FLAC compression options unclear: --exhaustive-model-search, --qlp-coeff-precision-search - Sound Design Stack Exchange
        • They give a small improvement to the compression at the cost of encoding time.
        • A table of the different compression switches and there different outcomes.
      • Codecs - XiphWiki - This wiki describes our free and open protocols and softwar and covers the main codecs.
      • FLAC Compression Levels Explained and Compared - BoomSpeaker
        • In this article, we explain FLAC compression levels and help you choose the best option for your needs.
        • FLAC 5 is the default compression level for a good reason. This level of compression is the optimal balance between file size reduction and playback performance.
    • Tools
      • GitHub - Ardakilic/flac-to-16bit-converter
        • A cross-platform command-line tool that converts Hi-Res FLAC files to 16-bit FLAC files with a sample rate of 44.1kHz or 48kHz. Written in Go for excellent performance and cross-platform compatibility.
      • Top 5 FLAC Mergers to Merge FLAC Files in a Breeze - This post introduces five simple FLAC Mergers to merge FLAC files into one. Keep reading and learn how to perform the job with your FLAC files.
      • FLAC frontend
        • FLAC Frontend is a convenient way for Windows users not used to working with command lines to use the official FLAC tools.
        • It accepts WAVE, W64, AIFF and RAW files for encoding and outputs FLAC or OGG-FLAC files.
        • It is able to decode FLAC files, test them, fingerprint them and re-encode them.
        • It has drag-and-drop support too.
  • Opus
    • Opus (audio format) - Wikipedia
      • Opus supports constant and variable bitrate encoding
      • Opus packets are not self-delimiting, but are designed to be used inside a container of some sort which supplies the decoder with each packet's length.
      • Still in active development.
  • WavPack
    • While WavPack is an excellent and highly-regarded audio format, it is not as popular or as widely supported as FLAC. FLAC has become the de facto standard for lossless audio compression.
    • WavPack Audio Compression
      • WavPack is a completely open audio compression format providing lossless, high-quality lossy, and a unique hybrid compression mode. For version 5.0.0, several new file formats and lossless DSD audio compression were added, making WavPack a universal audio archiving solution.
      • In the default lossless mode WavPack acts just like a 7-Zip compressor for audio files, including the preservation of all the headers and metadata, so the restored files are identical to the original. Unlike MP3 or WMA encoding which can affect the sound quality, not a single bit of the original information is lost, so there's no chance of audible degradation. The compression ratio depends on the source material, but generally is between 30% and 70%.
      • ** Large List of Players **
    • WavPack - Wikipedia
      • WavPack is a free and open-source lossless audio compression format and application implementing the format. It is unique in the way that it supports hybrid audio compression alongside normal compression which is similar to how FLAC works. It also supports compressing a wide variety of lossless formats, including various variants of PCM and also DSD as used in SACDs, together with its support for surround audio.
      • Supports embedded CUE sheets.
    • WavPack explained - What is WavPack? WavPack is a free and open-source lossless audio compression format and application implementing the format.
    • WavPack - Hydrogenaudio Knowledgebase

Audio Players (ADTRAC support)

Forums

  • HydrogenAudio - The audio technology enthusiast's resource
  • VideoHelp Forum - This forum will help you with all your video and audio questions!

Troubleshooting

 

Published in Other Devices
Read more...
Thursday, 12 September 2024 08:53

Divi Contact form will not send if using a free email address

Background

This article is based on the server running cPanel/WHM, the website CMS is WordPress with Divi as it's template, but the logic will most likely apply to a lot of other platforms.

Issue

I have a contact form that will not send the emails when the submitted details contain a free email address even though the contact form says the message was sent.

The failed emails do not appear in "Track Delivery" in cPanel so I have nothing to inspect and figure out what is going on.

If you do not manage your emails locally then an emails that are sent but are bounced will be returned to the server defined in the MX entry.

Cause

  1. Outbound emails are being scanned for SPAM by SpamAssassan (spamd).
  2. The email in the `Email Address` field on a Divi contact form is used by default for the <reply-to> header.
  3. Emails with freemail addresses present in the header score extra SPAM points.
  4. Because of the extra points caused by having freemail addresses present, the emails are scored just above the SPAM score threshold and they become flagged as SPAM.
  5. Flagged emails are modified and then delivered to the system mailbox in cPanel, they are never passed to the MTA (Exim).
    • The modification and redirects are performed by spamd.
    • cPanel "Track Delivery" shows transactions by Exim, but because the email never gets to Exim, there will be no record of the delivery or transport of the email.
    • A modified email in the system mailbox might look something similar to this:
      ### Title ###

Mail failure - rejected by local scanning code

### Message Body ###

A message that you sent was rejected by the local scanning code that
checks incoming messages on this system. The following error was given:

  This message was classified as SPAM and may not be delivered

------ This is a copy of your message, including all the headers. ------

.....

Solutions

These are some solutions an workarounds, pick which ever best suits your needs, which ever you pick you should monitor the situation for a while to make sure the changes you implement are working as expected.

Use SMTP plugin for WordPress

  • Using this method reduces the outbound SPAM score massively
  • Requires you to setup an email account for every website. Do not use the cPanel system account for emails as this is a security risk.
  • Your server does not need to handle email for the domain for you to be able to create an email account locally and send from it as normal, however I do recommend you make sure the SPF record is correctly set and that DKIM is not going to be an issue.
  • My recommended plugin is: FluentSMTP | WordPress.org

Remove the Freemail address from the email header

  • When using Divi, the email address on a contact form is used by default as the reply address Moving the client's email address to the content only would most likely reduce the SPAM score below 5 and therefore all the email to be sent.
  • In Divi you would use Message Patterns to alter the content of the email.

Increase the outbound SPAM score threshold

  • This change would be global
  • WHM --> Exim Configuration Manager --> Basic Editor --> Apache SpamAssassin Options -->
    • Scan outgoing messages for spam and reject based on the Apache SpamAssassin™ internal spam_score setting: Off
    • Scan outgoing messages for spam and reject based on defined Apache SpamAssassin™ score: 8.5
    • Do not forward mail to external recipients if it matches the Apache SpamAssassin™ internal spam_score setting: Off
    • Do not forward mail to external recipients based on the defined Apache SpamAssassin™ score: 8.5

NB: 8.5 = Default Threshold + PHP_SCRIPT + KAM_COUK

Disable outbound SPAM scanning

  • This change would be global.
  • This is not the preferred method as there is not outbound SPAM checking which can allow abuse.
  • WHM --> Exim Configuration Manager --> Basic Editor --> Apache SpamAssassin Options -->
    • Scan outgoing messages for spam and reject based on the Apache SpamAssassin™ internal spam_score setting: Off
    • Scan outgoing messages for spam and reject based on defined Apache SpamAssassin™ score: Disabled
    • Do not forward mail to external recipients if it matches the Apache SpamAssassin™ internal spam_score setting: Off
    • Do not forward mail to external recipients based on the defined Apache SpamAssassin™ score: Disabled

Disable certain SpamAssassin tests

You can reduce the SPAM score by disabling or cancelling out certain tests, but this requires a lot more time to setup.

Notes

WordPress - Email subsystem

  • mail()
  • Email Logging
  • Code Walk through 
    ## wordpress/wp-includes/PHPMailer/PHPMailer.php

'instantiate' => 'Could not instantiate mail function.',

-->

mailPassthru($to, $subject, $body, $header, $params)

-->

$result = @mail($to, $subject, $body, $header, $params);

-->

mail()              # This is a wrapper for sendmail

-->

sendmail            # cpanel sendmail is blocking gmail addresses

-->

sendmail returns true or false

WHM - Settings

  • General
  • Tutorial
  • SpamAssassin’s internal spam_score
    • Is calculated by summing the scores of various matched rules.
    • This is not the SPAM threshold, but just the score that SpamAssassin assigns to the email after all of the tests.
    • How to Configure SpamAssassin in cPanel – PhilmoreHost
      • Configuring your internal SpamAssassin score threshold = Specify a score under Apache SpamAssassin bounce spam score threshold.  ?
  • cPanel Tutorial Series 6: using email - TransIP - This is the sixth part of our cPanel Tutorial Series.
    • Apache SpamAssassin ™ reject spam score threshold
      • Incoming messages that are designated as spam are stopped instead of subjects being rewritten (see Filters), or the mail is moved to your spam box. You will never see messages that meet these criteria in your mail. If you use this option, we advise you to use a fairly generous score so only messages that are definitely spam are stopped, for example with a score of 10-11.
    • Apache SpamAssassin ™ bounce spam score threshold
      • Sends a bounce email to the sender of spam when mail reaches the set score. This can work positively and negatively: a conscious spammer knows that you are using a filter and will try to find something to work around it, but someone with an infected computer / server will find out more quickly that he or she has an infected computer / server thanks to a bounce message.
    • Scan outgoing messages for spam and reject based on the Apache SpamAssassin ™ internal spam_score setting
      • Scans all outgoing messages from your VPS and stops all messages that reach the set spam score (default 5). 
        This is a very useful option that we highly recommend. For example, suppose you created cPanel accounts for your customers and they host their own sites but never update them, then there is a plausible chance that sooner or later a vulnerability will be found, and a domain will start sending spam. Thanks to this option, you get rid of that spam, so your VPS does not get a bad IP reputation.
    • Scan outgoing messages for spam and reject based on defined Apache SpamAssassin ™ score
      • This option does the same as the previous one, but this allows you to determine the spam score upon which SpamAssassin takes action when outgoing mail is recognized as spam.
    • Do not forward mail to external recipients if it matches the Apache SpamAssassin ™ internal spam_score setting
      • Mail that is addressed to your VPS and which is redirected is also scanned by SpamAssassin and stopped if it is marked as spam.
    • Do not forward mail to external recipients based on the defined Apache SpamAssassin ™ score
      • Same as the previous option but allows you to set a score yourself.
    • Score
      • By default, SpamAssassin marks mail as spam when it reaches a score of 5. This base value can only be adjusted via command line using the following commands: 
        sudo nano /etc/mail/spamassassin/local.cf
      • The particular rule to alter is: 
        #   Set the threshold at which a message is considered spam (default: 5.0)
#
# required_score 5.0
  • acl_not_smtp and acl_smtp_data
    • Both acl_not_smtp and acl_smtp_data can count towards the Apache SpamAssassin™ internal spam_score setting, depending on how your Exim configuration is set up.
    • There is no proper documentation from cPanel for these options.
    • Ypu can expose the underlying code in the GUI by using the 'Advanced Editor'.
    • acl_not_smtp:
      • outgoing_spam_scan (Scan outgoing messages for spam and reject based on the Apache SpamAssassin™ internal spam_score setting)
      • This refers to Exim's Access Control Lists (ACLs) that apply to non-SMTP email submissions, such as mail sent from local scripts or PHP applications. This is often used to set rules for handling outbound mail generated by websites, contact forms, or local applications.
      • Purpose: To control and filter outgoing email messages that are not sent via SMTP, such as web apps or local daemons.
      • Advanced Settings (Under Advanced editor):
        warn
        condition   = ${if forany{<, $recipients}{!match_domain{${domain:$item}}{:+relay_domains}}}
        set acl_m_outbound_recipient = 1

warn
        condition   = $acl_m_outbound_recipient
        condition   = ${if <={$message_size}{1000K}}
        condition   = ${if !eq{$originator_uid}{0}}
        condition   = ${perl{spamd_is_available}}
        set acl_m_spam_scan_enabled  = 1

deny
        condition   = $acl_m_outbound_recipient
        condition   = $acl_m_spam_scan_enabled
        spam        = cpaneleximscanner/defer_ok
        message     = This message was classified as SPAM and may not be delivered
        log_message = "SpamAssassin as cpaneleximscanner detected OUTGOING not smtp message as spam ($spam_score)"

warn
        condition   = $acl_m_outbound_recipient
        condition   = $acl_m_spam_scan_enabled
        log_message = "S
    • acl_smtp_data:
      • outgoing_spam_scan (Scan outgoing messages for spam and reject based on the Apache SpamAssassin™ internal spam_score setting)
      • Purpose: The acl_smtp_data ACL is used to inspect the content of the email before it's accepted for delivery. It is commonly employed for tasks such as:
        • Spam Filtering: Checking the email content against spam filters (like SpamAssassin).
        • Virus Scanning: Scanning the email for malware or viruses.
        • Attachment Filtering: Restricting certain types of file attachments or scanning them.
        • Rate Limiting or Message Size Checking: Ensuring that message sizes adhere to server limits.
        • Custom Message Rejection: Applying custom rules to reject messages that contain specific content or violate policies.
      • Advanced Settings (Under Advanced editor):
        warn
        condition = $acl_m_outbound_recipient
        condition = ${if <={$message_size}{1000K}}
        condition = ${if !eq{$acl_c_authenticated_local_user}{root}}
        condition = ${if !match{$authenticated_id}{\N^__cpanel__service__auth__[^+%:@]+$\N}}
        condition = ${perl{spamd_is_available}}
        set acl_m_spam_scan_enabled = 1


deny
        condition   = $acl_m_outbound_recipient
        condition   = $acl_m_spam_scan_enabled
        spam        = ${if eq{$acl_m1}{}{cpaneleximscanner}{$acl_m1}}/defer_ok
        message     = This message was classified as SPAM and may not be delivered
        log_message = "SpamAssassin as ${if eq{$acl_m1}{}{cpaneleximscanner}{$acl_m1}} detected OUTGOING smtp message as spam ($spam_score)"

warn
        condition   = $acl_m_outbound_recipient
        condition   = $acl_m_spam_scan_enabled
        log_message = "SpamAssassin as ${if eq{$acl_m1}{}{cpaneleximscanner}{$acl_m1}} detected OUTGOING smtp message as NOT spam ($spam_score)"

 

WHM - Outbound Filtering

  • I am not sure if it uses the per user/cPanel custom rules (as appropriate) for calculating the spam_score when outbound filtering, I cant see why it doesn't though.
  • When an email has been forwarded after being scanned for SPAM it will have an additional header with it's score.
  • How to configure Spam Assassin to scan outgoing mail. – cPanel - This article covers configuring outgoing mail to be scanned by Spam Assassin.
  • Enable Outgoing Spam Filtering Using SpamAssassin - eukhost - This guide explains how to enable Outgoing Spam Filtering Using SpamAssassin.
  • Configure SpamAssassin to block outgoing form mail – cPanel
    • There are actually two assigned spam scores, one when you receive the email locally and one that is assigned to it when it's scanned outbound.
    • In this case Spam Score: X-Spam-Score: 100 refers to the score assigned on delivery to the server.
    • The score that is being assigned to the server when it is sent is the Outgoing Spam Score which in this case is below the threshold of 2: X-Outgoing-Spam-Status: No, score=1.7 So with a spam score of 1.7 SpamAssassin isn't seeing this email as spam and sends it.
  • How-To Prevent Exim From Forwarding Spam – cPanel - This article covers configuring Exim to not forward mail based on the message's Apache SpamAssassin™ Spam score.

SpamAssassin - Example rules that can be triggered

To find the rules, search for them in the following format: describe KAM_DMARC_STATUS

SpamAssassin - Managing rules

  • General
  • KAM Ruleset
    • This is not part of the Spamassassin base code.
    • The is a 3rd party ruleset that is included with cPanel/WHM and is on by default.
    • In cPanel/WHM: /etc/mail/spamassassin/KAM.cf
    • KAM Ruleset | The McGrail Foundation
      • The KAM Ruleset is a set of Apache SpamAssassin rules developed and used on our systems.
      • This ruleset has been in active use and development since May 2004 and provides a significant boost to the performance and efficacy of a stock installation of Apache SpamAssassin.
    • KAM Ruleset Channel | The McGrail Foundation - The McGrail Foundation Home Page

SpamAssassin - What rules caused an email to get flagged?

  •  Exim Mail Log - Example Entry 
    Sep  1 13:56:08 srv spamd[414141]: spamd: connection from localhost [127.0.0.1]:43490 to port 783, fd 6
Sep  1 13:56:08 srv spamd[414141]: spamd: setuid to cpaneleximscanner succeeded
Sep  1 13:56:08 srv spamd[414141]: generic: trusted_networks doesn't contain internal_networks entry '0/0'
Sep  1 13:56:08 srv spamd[414141]: spamd: checking message <XXXXXXXXXXXXXXXXZldVRrQX6dyBuRHk9yR9jnJNGRM@www.example.co.uk> for cpaneleximscanner:992
Sep  1 13:56:18 srv spamd[414141]: spamd: identified spam (5.9/5.0) for cpaneleximscanner:992 in 10.3 seconds, 3794 bytes.
Sep  1 13:56:18 srv spamd[414141]: spamd: result: Y 5 - FREEMAIL_FORGED_REPLYTO,KAM_COUK,KAM_DMARC_STATUS,PHP_SCRIPT,T_SCC_BODY_TEXT_LINE,URIBL_BLOCKED scantime=10.3,size=3794,user=cpaneleximscanner,uid=992,required_score=5.0,rhost=localhost,raddr=127.0.0.1,rport=43490,mid=<XXXXXXXXXXXXXXXXZldVRrQX6dyBuRHk9yR9jnJNGRM@www.example.co.uk>,autolearn=no autolearn_force=no,shortcircuit=no
  • spam - Where can i find explanation of a SpamAssasin scores like SPOOFED_FREEMAIL? - Server Fault 
    ## This adds the score
/var/lib/spamassassin/3.004006/updates_spamassassin_org/20_freemail.cf

## This is the list of the Freemail domains
/var/lib/spamassassin/3.004006/updates_spamassassin_org/20_freemail_domains.cf

## An old list
/var/lib/spamassassin/3.004006/updates_spamassassin_org/20_freemail_mailcom_domains.cf
  • How to find the descriptions of SpamAssassin rules to help understand why a message was marked as spam – cPanel - If you find that SpamAssassin is marking messages as Spam when it should not be, or that SpamAssassin is not marking messages as spam when it should be, you can use the following procedure to find out what rules were applied to a message and review the description of the applied rules for additional context.
  • How can I check why SpamAssassin applied a particular score? – cPanel - Some email messages are flagged or rejected as spam, but I'm not sure why. Can I check how SpamAssassin is applying this score?
  • How to find SpamAssassin scan results – cPanel -When SpamAssassin scans an email the results are saved to the /var/log/maillog file. This can be used to determine what rules are being triggered by the message. 
    /usr/local/cpanel/logs/spamd_error_log

SpamAssassin - Here’s a breakdown of how this score is calculated:

I got this from my VPS provider:

SpamAssassin’s internal spam score is calculated by summing the scores of various matched rules.

  1. Rule-Based System
    • SpamAssassin uses a large set of predefined rules to analyze various parts of an email, including:
      • Email headers (e.g., suspicious sender domains, mismatched or forged headers).
      • Message body content (e.g., words commonly associated with spam, HTML content, or embedded links).
      • Attachments (e.g., dangerous file types, large attachment sizes).
      • Blacklists (e.g., checking if the sender's IP address or domain is on a spam blacklist).
    • Each rule is assigned a specific score, positive or negative, depending on how indicative it is of spam. These scores are predefined, but you can customize them in SpamAssassin’s configuration files.
      • Positive score: Increases the likelihood that the message is spam.
      • Negative score: Decreases the likelihood that the message is spam (e.g., messages from trusted sources might get a negative score).
  2. Cumulative Scoring
    • When SpamAssassin scans an email, it applies multiple rules. The total spam score is the sum of all the individual rule scores that match the email.
    • Example: 
      Rule    Description    Score
HTML_MESSAGE    Email contains HTML    1.0
BAYES_99    Bayesian filter suggests 99% spam probability    3.5
RCVD_IN_SPAMHAUS    Sender's IP is in the Spamhaus blacklist    2.0
DKIM_VALID    Email has a valid DKIM signature    -1.0
Total Score        5.5
      • In this example, the email’s total spam score is 5.5.
  3. Spam Threshold
    • The total score is compared to the spam threshold configured in cPanel/WHM. The default threshold is usually 5.0. If the total score exceeds this threshold, the message is flagged as spam.
      • Spam Threshold of 5.0: If an email’s score exceeds 5.0, it is considered spam.
      • Spam Threshold of 7.0: If the threshold is set to 7.0, only messages with a spam score higher than 7.0 will be flagged as spam.
    • You can adjust the spam threshold score in the SpamAssassin configuration settings to make the filter more or less aggressive.
  4. Bayesian Filtering (Adaptive Learning)
    • SpamAssassin also uses a Bayesian filter, which is a machine-learning technique that adapts to the types of emails received over time. When trained with both spam and non-spam emails, this filter becomes more accurate in determining whether an email is spam by calculating the probability based on previously learned patterns.
      • The Bayesian filter assigns probabilities to words or phrases, which contribute to the overall spam score.
      • SpamAssassin rules like BAYES_50 (50% spam probability) or BAYES_99 (99% spam probability) are examples of how this filter impacts the overall score.
  5. Custom Rules and Scoring
    • You can also create custom rules and assign them specific scores. This allows you to adapt SpamAssassin to your organization’s needs by:
      • Increasing the score of certain patterns (e.g., emails with specific attachments).
      • Decreasing the score for emails from trusted domains or senders.
  6. Adjusting the Spam Score Multiplier
    • In cPanel and WHM, the spam score is multiplied by 10 for internal use. For example, if you set a spam score threshold of 5.0 in WHM, it will show up as 50 in log files and email headers.
    • For instance, if you see the following in an email header, It corresponds to a score of 4.0 (since 40 divided by 10 is 4.0), which is below the default spam threshold of 5.0, so the email wouldn’t be flagged as spam.
      X-Spam-Score: 40

 

Published in General
Read more...
Thursday, 01 August 2024 10:23

My Meta Quest Notes

These are a collection of my notes for the Meta Quest 3

General

  • Official Sites
  • Other Sites
  • Specs
  • Performance
  • Equipment
    • VR Treadmills
    • Controller Stocks
  • Maintenance / Looking after your Quest
  • Legal / Warranty
    • Meta might be trying to get around EU 2 year warranty with Quest 3 or they already did | Reddit
      • Consider Duration from the T&Cs: 1 year from the date of purchase or delivery of the Product, whichever is later (the “Warranty Period”). If you are a consumer, this does not affect your statutory rights which may provide for longer warranty coverage.
      • You're mixing the legal guarantee (2 years in the EU, regarding the seller of the product) with the commercial warranty (1 year, in most cases regarding the manufacturer). A lot of companies only offer 1 year of commerical warranty (like Apple for example).  
      • this. also important to know: the one year warranty that apple and meta offer are voluntary. but as nightkrwlr said: it's different from the two-year consumer law rule.
      • = 2 Years warranty
    • Meta Quest EU/EEA/UK consumer right of withdrawal information | Meta Quest - Under applicable law, consumers in the European Union (EU), the European Economic Area (EEA) and the UK have a right to withdraw from or cancel certain purchases for a refund.
    • Meta Horizon Store Terms | Meta Quest - No meta description
  • Sign up issues
    • The sign up form will only accept UK postcodes in this format SW1 1LF and not SW11LF
  • Meta keep trying to charge £59.99 for my free subscription
    • I could not get the 6 months free to work, my bank kept on wanting to charge me £59.99 even thought it said the due amount today was £0.00
      By ticking this box and clicking the Confirm button, you agree that the content will immediately begin downloading onto your device, and you acknowledge that you will thereby lose any statutory right of withdrawal (EU/EEA) or cancellation (UK). Learn more
You will be charged £59.99, including tax, when this free trial ends on 26 Feb 2025 and every year when this subscription is automatically renewed until you cancel. Cancel at any time in your account settings at least 24 hours before the end of this free trial or the next billing date to avoid future charges.By selecting Confirm, you agree to the Meta Quest Store Terms.
    • So this is what I did to fix it:
      • Created a virtual card with £10 on it to prevent my account from getting charged.
      • Using the phone APP I signed up using my information and the virtual card
      • When I get to the point it wants to test my card is valid, the amount being charged to my account is £59.99
      • A 2FA notice appeared in a browser thing, I clicked cancel on it ignoring any messages on my phone to accept or deny the transaction through my banking App.
        • This is not the link that is sent to your phone's banking app asking you to approve.
        • Never approve it and don't cancel it either.
        • I let the request in my banking app expire. It should only take 10 mins.
      • Bingo, it works
    • Research
  • Cloud Backup
    • About cloud backup | Meta Store
      • When cloud backup is turned on, Meta backs up your device's app data, such as app progress or app settings, to the cloud. This allows you to easily pick up where you left off in a game if you reinstall an app, factory reset your device or set up a new device.
      • To keep your cloud backup data safe, your app data is encrypted on the device and remains encrypted on our servers.
  • User Setups

What I Bought

Where to buy Kit

  • Wield VR
    • The Best VR Gunstock & Accessories On The Planet
    • Best VR Accessories: The most customizable VR gunstock in the world for Quest 2, 3, 3S and Pro, Valve Index, PSVR2, HTC Vive, Oculus Rift S, Pico 4 and HP Reverb G2
  • KIWI design
    • VR Accessories for Quest 3S,Quest 3,Quest 2 and More
    • KIWI design: Made for Meta authorized partner, leading brand of top-tier XR accessories, our head straps, grips, charging, cases and more are sure to enhance comfort of your Quest 3/3S/2.
    • Official Amazon Store (UK): Amazon.co.uk: KIWI design
    • Where to Buy | AMVR - Other Amazon Stores
    • No response from the website chat.
  • AMVR
    • Premium VR Accessories for Meta Quest 3/3S/2& PICO
    • Discover top-quality VR accessories from AMVR for Meta Quest 3/3S/2, PICO, HTC Vive, and PSVR2. Explore our best-selling head straps, face covers, controller grips,charging, cases & more—designed for VR comfort and performance.
    • Official Amazon Store (UK): Amazon.co.uk: AMVR
    • They responded from the shop website.

Meta Quest+

  • Meta Quest+ subscription | Meta Store
    • Experience the ultimate gaming adventure with Meta Quest+. Enjoy instant access to over 25 games, exclusive deals and monthly drops. Cancel at any time with no hidden fees.
    • Meta Quest+ is your subscription for premium games and more. Discover and play on repeat. You'll get instant access to a growing content catalogue and curated monthly drops of top titles, all for just £7.99 a month. Plus, you'll get exclusive deals and offers as a subscriber. Get ready to explore new apps and worlds.
  • Meta Quest Plus (Horizon+) - Homepage | Meta Store
    • Claim your free games here every month, both the permanent ones and the ones in the rotating games catalogue.
  • Monthly titles and Games catalogue | Meta Store
    • Claim your free games here every month, both the permanent ones and the ones in the rotating games catalogue.
  • You get a selection of free games every month in 2 categories, both of which require you to redeem them to gain access but they have different retention terms.
    • Monthly Games
      • Every month you are given 2 games you can redeem.
      • You need to redeem these games, when offered, to keep them.
      • Once redeemed, these games are added to your library permanently.
    • Games catalogue
      • The majority of the game catalogue will remain consistent month over month, but each month, one or more titles may leave or be added in order to keep content fresh.
      • If you have a redeemed a game that is removed from the `Games catalogue` you will loose access to it and will need to purchase it to continue using it. Your game saves should remain preserved.
  • Examples of Meta Quest+ game listings
    • Redeem
    • Redeemed
    • Redeemed - Soon to be removed from the `Games catalogue`
  •  How to view you application and games library
    • Website:
      • You cannot view your library via the website.
    • Meta Horizon App:
      • Menu --> Device Management --> Library
    • Headset: ....

Q&A

  • What happens if I unsubscribe or resubscribe?
    • Once you are no longer a paying Meta Quest+ subscriber, you will lose access to all previously redeemed Meta Quest+ titles and not be able to redeem any more titles.
    • When you resubscribe, you will regain access to all previously redeemed Meta Quest+ titles and the titles that are currently available for as long as you are a subscriber.
    • You will keep access to games and titles you have purchased.
  • Do I need a Facebook account? = No
    • Introducing Meta Accounts: A New Login for VR | Meta Quest Blog - Today we’re introducing Meta accounts: a new way for people to log into their VR headsets that doesn’t require a Facebook account. When we announced that we would start requiring people to log into Meta Quest using a Facebook account, we received a lot of feedback from the Quest community. We took that feedback into account as we designed a new Meta account structure that gives people flexibility and control.
  • Should I buy 128GB or 512GB model? = buy 512GB
  • What can you do with Quest?
    • You can use Quest for PCVR games
    • With a 3rd party App and capture card you can play your xbox.
    • SteamVR games can be played on the Oculus now
  • Where can I buy games and apps from
  • Transferring Games to Other Meta Account Profile

Apps

  • System
  • YouTubeVR
    • Experience your favourite YouTube channels, videos and creators in virtual reality.
    • The YouTube VR app turns every video on the platform into your own virtual reality experience and reimagines YouTube as a 3D world you can explore from the inside.
    • Cannot load the app, keeps on crapping out
      • 5 Ways to Fix YouTube VR if It’s Not Working on Oculus Quest - To fix Oculus Quest YouTube VR not working issue, you will need to tweak some settings and follow additional steps shown in this article.
      • Solution
        • Setup you boundary area before you start YouTubeVR
        • You must share boundary information when asked otherwise the app will just crap out with no message.

Casting and Inputting

Remote Desktop / Productivity

Casting from Quest to (Phone|Computer)

Play PCVR Games on Quest

HDMI Input (Meta Quest HDMI Link) from (Xbox One|SteamDeck|Playstation)

Xbox One

Play Xbox games on Quest (General)

You can pair your Xbox controller on your Quest for using with games.

  • Methods
    • Xbox One HDMI Output --> HDMI USB capture dongle --> quest
    • Xbox Gamepass
      • is natively supported on Quest 3
      • A.k.a Xbox Cloud Gaming (beta) / Xbox App
      • No Xbox needed
    • Xbox --> PC --> Quest
      • Uses Virtual Desktop App on the Quest and PC.
    • As PC VR Headset (needs a decent PC)
  • 4 Ways to Play Xbox Games On Oculus Quest / Quest 2 – Smart Glasses Hub
    • Can you also use the Oculus Quest and Quest 2 VR headsets to enjoy some Xbox gaming?
    • The short answer is that you can play Xbox games on both the Oculus Quest and Quest 2 headsets.
    • It is possible to stream the Xbox console to your headset or alternatively play Xbox games without the console by using the Xbox Cloud gaming service.

Play Xbox games on Quest (via Xbox App)

  • Playing Xbox on Oculus Quest 3 | OculusQuest | Reddit
    • I got the Xbox app running on the Oculus Quest 3. For anyone wanting to know how it's done, follow the steps below.
      1. Enable developer mode on Oculus. The requires a developer account which anyone can set up. It's super easy. This give you access to the library folder for unknown sources, more on this later.
      2. Install Side Quest on a PC
      3. Download File Manager APK from https://flashlight-clock-file-manager.en.uptodown.com/android
      4. Follow Side Quest steps to connect your Oculus
      5. Upload file manager to Oculus via side quest
      6. Get on your Oculus and use the web browser to search for the Xbox app APK and download from uptown.
      7. Go to your library, click the search bar, use the drop down to go to "unknown sources"
      8. use the file manager to install the Xbox APK
      9. connect an Xbox controller to the headset via Bluetooth setting
      10. log into Microsoft account and enjoy!
      11. It seems like a lot of steps but it only took me about 20 minutes altogether.
    • Other Comments
      • For some reason the xbox app uses low resolution (I'm using quest pro), still playable but sometimes annoying
      • Surprisingly low in my experience, but it looks like they use a low bitrate to achieve that so it doesn’t look great. There’s a custom Xbox remote play app someone made that lets you adjust the bitrate so that may help.
      • I know Xbox Cloud Gaming is officially coming to the Quest in December and I've seen some people assume that means you'd be able to remote play as well, but I'm not actually sure that'll be the case since I don't think they've specifically mentioned remote play.
      • For those wondering about the screen resize, open this menu on the oculus and hit "switch view". After that you should be able to resize windows.
      • Also, if anyone has any issues where the Xbox controller uses head tracking, press the start and back button on the controller at the same time and it will switch the controls.
      • Sidequest (advanced) can install apks directly to the oculus headset
      • FYI, there is a way easier way to do this. Just download Fluid on App Lab. Works out of the box.
  • How to play Xbox games on the Meta Quest 3 | Trusted Reviews - You can stream Xbox games directly to your Meta Quest 3, as well as the Quest 2 and the Quest Pro. Here's how.

Casting to a Xbox One

Casting from a Xbox One

  • How to Stream Xbox One to Your PC
    • You can stream Xbox One to any PC as long as they're both running Windows and are connected to the same network. Here's how to do it.
    • Page is faulty, click on the TOC links on the left hand side to navigate.

Play Xbox games on your PC

Purchases

random thing to look at later, I have not made a descicion and do not know the quality of the brands, this is more an idea holders

Troubleshooting

  • Solved: Meta Quest app - stuck on the "Pair a new device" ... - Meta Community Forums - 1153444
    • Q:
      • I'm stuck on the "Pair your headset with the Meta Quest app to continue." step during the Meta Quest 3 setup. The smartphone app tells me to "Allow permissions", which I have already done. I have "Use precise location" enabled as well. Pressing the blue "Continue" button does nothing. The Meta Quest 3 button is greyed out. I have a code displayed in the headset that I'm supposed to input somewhere in this app. What do I do?
      • My Meta Quest app is up to date. I have already installed all system updates on my smartphone. My smartphone and Meta Quest 3 are on the same WiFi network.
    • A:
      • I had the same problem. Make sure your location is turned on from the swipe down panel.
  • Solved: Passthrough turns on - can't use menu button - Meta Community Forums - 1078491
    • Q: My Oculus would not load the menu screen without passthrough on. With passthrough on the oculus would not load apps/games. The app on my phone says the apps are open on the device. 
    • A:
      Hey there! Thank you for letting us know the experience you're having with your device as this is not what we want. We do have a few users having the menu button disappear and a Factory Reset has gotten them back on track. However, I am not seeing some users not having the button load overall even when factory resetting. 
  • Stuck on Passthrough with Menus not working - Meta Community Forums - 1173053
    • Q: I'm stuck in pass through but the home music cuts in and out and I can't open any menus or nothing
    • A: With the device being stuck viewing your play area, we'd like to hard reboot the headset by holding the power button down for 30 seconds. 
  • Hand tracking not working
  • Cannot login to the Meta Quest community forum

    This call accesses the User ID platform feature, which requires certifying through the Oculus Data Use Checkup program. Please visit this page for more detail: https://developer.oculus.com/distribute/publish-data-use/. If you have already completed a Data Use Checkup, please ensure that all compliance issues are resolved by visiting the Compliance Dashboard: https://developer.oculus.com/resources/publish-compliance-dashboard/.
    • If you get this error below when you try and login to the Meta Quest community forum then you should know:
      • this is nothing you have done but is the garbage infrastructure and support team from Quest. A billion dollar corporation cannot keep their own API key updated and then when it needs swapping takes nearly 2 weeks to fix. Meta need to change their support team from wherever they have outsourced it to.
      • This is a common occurrence
    • Solved: Login to user forum problems | Meta Community Forum
    • Developer account data use checkup. | Overclockers UK Forums - Has anyone with a dev account had this pop up when trying to log into the meta forums
  •  not authorized to relay messages to the server that reported this error
  • Meta Quest app - stuck on the "Pair a new device" screen - Meta Community Forums - 1153444
    • Q:
      • I'm stuck on the "Pair your headset with the Meta Quest app to continue." step during the Meta Quest 3 setup.
      • The smartphone app tells me to "Allow permissions", which I have already done.
      • I have "Use precise location" enabled as well.
      • Pressing the blue "Continue" button does nothing.
      • The Meta Quest 3 button is greyed out.
      • I have a code displayed in the headset that I'm supposed to input somewhere in this app.
      • What do I do?
    • A:
      • Make sure your location is turned on from the swipe down panel.

 

Published in Other Devices
Read more...
Tuesday, 16 July 2024 12:02

My Pond Notes

These are my notes on rebuilding my pond

Purchasing

Tutorials

 

 

Published in House
Read more...
Page 4 of 96